精华内容
下载资源
问答
  • JS点击事件 onclick

    千次阅读 2018-12-27 10:34:52
    onclick 点击事件 onclick 以文字de放大与缩小为实例 嗨… 各位小可爱们,我们又见面了 先来了解一下定义和用法 onclick 属性在单击鼠标时触发。 记住是 单击单击单击!!! 废话不多,直接上代码,希望能对...

    onclick 点击事件

    onclick 以文字de放大与缩小为实例

    嗨… 各位小可爱们,我们又见面了

    先来了解一下定义和用法

    onclick 属性在单击鼠标时触发。 记住是 单击单击单击!!! 只点击一次即可触发事件

    废话不多,直接上代码,希望能对你们有所帮助

    	<meta charset="utf-8" />
    	<style type="text/css">
    		
    		#wrap{
    			
    			width: 90%;
    			height: 100%;
    			margin: 50px auto;
    			padding: 20px;
    			font-family: arial;
    			font-size: 18px;
    			color: white;
    			border-radius: 10%;
    			background-image: radial-gradient(ellipse 100% 100% at center,pink 35%,
    			lightpink 45%, deeppink 100%);/*设置背景颜色*/
    		}
    		#wrap p{
    			text-indent: 2em;
    		}
    		#wrap span{
    			display: inline-block;
    			width: 50px;
    			height: 25px;
    			background-color: deeppink;
    			text-align: center;
    			line-height: 25px;
    			margin-left: 80px;
    			cursor: pointer;
    		}
    		
    	</style>
    	
    </head>
    <body>
    	
    	<div id="wrap">
    		
    		<span> + </span>
    		<span> - </span>
    		
    		<p>我感到难过,不是因为你欺骗了我,而是因为我再也不能相信你了。 ——尼采 </p> 
    		<p>我始终相信,在这个世界上,一定有另一个自己,在做着我不敢做的事,在过着我想过的生活。 ——宫崎骏 </p> 
    		<p>你锋芒毕露,这是你的弱点,你像把无鞘刀,锋利,但好刀应在刀鞘里。 ——黑泽明《剑穿心》 </p> 
    		<p>如果你给我的,和你给别人的是一样的,那我就不要了。 ——三毛 </p> 
    		<p>花朵预兆着果实,少女梦想着爱情。 ——雨果《海上劳工》 </p> 
    		<p>为什么你看到别人眼中有刺,却看不到自己眼中有梁木。 ——《圣经》 </p> 
    		<p>没有不可治愈的伤痛,没有不能结束的沉沦,所有失去的,会以另一种方式归来。——约翰•肖尔斯《许愿树》 </p> 
    		<p>别人帮你,那是情分,不帮你,那是本分。容不容得下是你的气度,能不能让你容下是我的本事。——《甄嬛传》 </p> 
    		<p>一切都明明白白,但我们仍匆匆错过,因为你相信命运,因为我怀疑生活。——顾城《错过》 </p> 
    		<p>我需要,最狂的风,和最静的海。 ——顾城 </p> 
    		<p>没有人愿意被关在笼子里,问题是给你一片无边无际的天空,你是不是真的敢要。 ——江南《此间的少年》 </p> 
    		<p>Is life always this hard,or is it just when you are a kid? </p> 
    		<p>人生总是那么痛苦吗?还是只有小时候是这样? </p> 
    		<p>Always like this. </p> 
    		<p>总是如此。 ——《这个杀手不太冷》 </p> 
    		<p>我一直以为,我没有对不住任何人,但现在我知道,我最对不住的,就是我自己。 ——陈凯歌《无极》 </p> 
    		<p>如谷之歌,扎根土里。与风共存,与种子越冬,与鸟歌颂。 ——宫崎骏《天空之城》 </p> 		
    		<p>也许,每天看见许多的水,对人类具有重大意义。 ——村上春树《当我谈跑步时我谈些什么》 </p> 
    		<p>不要停在平原,不要登上高山,从半山上看,世界显得最美。 ——尼采《世界的智慧》 </p> 
    		<p>有时候,你想证明给一万个人看,到后来,你发现只得到了一个明白的人,那就够了。 ——韩寒《后会无期》 </p>
    		
    	
    	<script type="text/javascript">
    		
    		let oWrap = document.getElementById("wrap");
    		let oSpan = document.getElementsByTagName("span");
    		let font=18;
    		
    		oSpan[0].onclick = function(){//点击事件
    			
    			font++;
    			if(font>=21){
    				font = 21;
    			}
    			oWrap.style.fontSize = font + "px";
    		}
    		
    		oSpan[1].onclick = function(){
    			
    			font--;
    			if(font>=10){
    				font = 10;
    			}
    			oWrap.style.fontSize = font + "px";
    		}
    		
    	</script>
    	
    </body>
    

    文字从网上摘的,嘿嘿,直接看效果

    点击+可以对文字进行放大,点击-可以对文字进行缩小

    展开全文
  • 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> [removed] function displayDate() { document.getElementById(demo)[removed]=Date(); } [removed] <...
  • 主要介绍了IE8的JavaScript点击事件(onclick)不兼容的解决方法,大家参考使用吧
  • 我们常用的在a标签中有点击事件: 1. a href=”[removed]js_method();” rel=”external nofollow” 这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不 必要的触发...
  • 本节主要介绍了js动态添加onclick事件可传参数与不传参数,需要的朋友可以参考下
  • "text/javascript" > window.onload= function () { var spans=document.getElementsByTagName( "span" ); for ( var i= 0 ;i;i++) { spans[i].onclick= function () { document.getElementById( ...
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{margin: 0px;padding: 0px;border-collapse:collapse;}
                #firtsdiv{width: 400px;height: 100px;border: 1px solid green;}
                #firtsdiv>div{width: 400px;height: 50px;border: 1px solid blue;}
                .span>span{width: 90px;height: 30px;float: right;margin: 5px;}
            </style>
            <script type="text/javascript">
                window.onload=function(){
                    var spans=document.getElementsByTagName("span");
                    for (var i=0;i<spans.length;i++) {
                        spans[i].onclick=function(){
                            document.getElementById("showdiv").style.backgroundColor=this.style.background;
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div id="firtsdiv">
                <div id="showdiv"></div>
                <div class="span">
                    <span style="background:black;"></span>
                    <span style="background: blue;"></span>
                    <span style="background: blueviolet;"></span>
                    <span style="background: red;"></span>
                </div>
            </div>
        </body>
    </html>
    

    这里写图片描述

    展开全文
  • 本文实例讲述了JavaScript给按钮绑定点击...我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 html> head> script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } scri

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法。分享给大家供大家参考。具体分析如下:
    我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function displayDate()
    {
    document.getElementById("demo").innerHTML=Date();
    }
    </script>
    </head>
    <body>
    <h1>My First JavaScript</h1>
    <p id="demo">This is a paragraph.</p>
    <button type="button" onclick="displayDate()">
    Display Date</button>
    </body>
    </html>

    javascript事件与功能说明大全:
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    这里写图片描述

    展开全文
  • js实现——鼠标单击事件-onclick和双击事件-ondblclick onclick单击 ondblclick:双击 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    js实现——鼠标单击事件-onclick和双击事件-ondblclick

    • onclick:单击
    • ondblclick:双击

    代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <!-- 方法一 -->
        <button id="clickBtn1">单击/双击按钮1</button>
        <!-- 方法二 -->
        <button onclick="btnClick()" ondblclick="sClick()">单击/双击按钮2</button>
        <!-- 定稿 -->
        <button onclick="dClick()">单击</button>
        <button ondblclick="dblclick()">双击按钮</button>
        <button onclick="dClick()" ondblclick=" dblclick()">单击/双击按钮</button>
        <script>
            // 方法一
            var clickBtn = document.getElementById("clickBtn1");
            clickBtn.onclick = function () {
                console.log("单击==")
            }
    
            clickBtn.ondblclick = function () {
                console.log("双击---");
            }
    
            // // 方法二
            function btnClick(e) {
                console.log("单击==")
            }
    
            function sClick(e) {
                console.log("双击---");
            }
    
            // 定稿
            var time = null;
            //单击事件
            function dClick(e) {
                // console.log("单击=====")
                //取消上次延时未执行的方法
                clearTimeout(time); //首先清除计时器
                //设置延时300ms
                time = setTimeout(function () {
                    //   time = setTimeout( ()=> {
                    //在此写单击事件要执行的代码
                    console.log("单击==")
                }, 300);
            }
    
            //双击事件
            function dblclick() {
                //取消上次延时未执行的方法
                clearTimeout(time);
                //下面写双击事件要执行的代码
                console.log("双击---");
            }
        </script>
    </body>
    
    </html>
    

    注意:

    定时器时间要大于300ms

    当同时绑定单击和双击事件时,会触发两次单击事件和一次双击事件:

    在这里插入图片描述

    效果

    在这里插入图片描述

    展开全文
  • text/javascript"&gt; // 两秒后模拟点击 setTimeout(function() { // IE if(document.all) { document.getElementById("clickMe").click(); } // 其它浏览器 else { va...
  • 问题:JavaScript使用事件onclick导致css样式失效 首先,我们用以下代码得到的是一个样式没有失效的红色”超链接”,如下图1 代码1: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &...
  • PHP (JS)JavaScript 对鼠标单击onclick事件作出反应.
  • 主要介绍了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法,结合实例形式分析了javascript通过针对单击onclick事件增加定时器进行onClick事件与onDblClick事件的区别判定操作,需要的朋友可以参考下
  • 主要介绍了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法,涉及JS页面元素遍历及属性动态操作相关技巧,需要的朋友可以参考下
  • onclick点击某个对象时触发 ondblclick:双击某个对象时触发 onmouseover:鼠标移入某个元素时触发 onmouseout:鼠标移出某个元素时触发 onmouseenter:鼠标进入某个元素时触发 onmouseleave:鼠标离开某个元素时...
  • js页面,进行页面内容的拼接时,a标签的onclick点击事件,需要传参数时,解决转义麻烦,不对的情况,提供了模板
  • 鼠标点击 使隐藏部分显示出来 效果图: Document 我是链接 快点我 我出现啦 我是链接 快点我 我出现啦 我是链接 快点我 我出现啦
  • JavaScript中处理事件单击事件onClick

    千次阅读 2013-08-10 20:45:27
    当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset ...
  • <script> onload=function () { function aa() { alert("dd"); //方法写在外面可以执行, 里面无法调用? } } </script>...input type="button" value="点我" onclick="aa()"> ...
  • 下面小编就为大家带来一篇js动态添加的DIV中的onclick事件简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js 事件 click onclick

    2020-09-30 10:11:34
    记录 click 和 onclick 混淆点 之前一直有点迷惑 onclick和click,今天看书可算搞清楚了,就记录一下吧 ... console.log('事件处理程序/事件侦听器') } setTimeout(() => { div.click() }, 3000);
  • js中的onclick事件传参

    万次阅读 2018-06-06 10:23:15
    js中的onclick事件传参2014年10月17日 18:13:28阅读数:2134 js中的onclick事件传参 1、在页面中给方法传参数,有如下的两种方法:方法1,onclick=cancel(id,patientId);在js文件中定义cancel方法如果要把当前...
  • JS捕获onclick与onsubmit等事件 有时候,用户点击一个按钮,提交一个表单,我们需要先对用户填写的内容做验证,然后再决定是否允许用户提交。这里给出两种捕获事件,决定是否允许用户进行下一步操作的方法。 使用...
  • 很多时候onclick事件是伴随着页面的跳转,也就会有相应的参数传递案。案例如下所示: <a href="#" onclick='showTable(this)'>123</a> #为你要跳转的页面 这个时候你传的参数就是123 ...
  • jsonclick点击事件传参问题

    千次阅读 2019-10-09 01:21:48
    项目中有用到使用js拼接onclick方法,但是onclick中的参数始终获取不到; 此处的templateKey是一个字母加下划线的组合: value += "<a class='delete' onclick='deleteDataTemplate("+ full.id +"," + full....
  • js动态给对象onclick事件赋值,动态传参数举两个例子一对一错,感兴趣的朋友可以对比下,希望可以从中发现不一样之处

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 204,509
精华内容 81,803
关键字:

js点击事件onclick