1.   1 <!DOCTYPE html>
  2.   2 <html lang="en">
  3.   3 <head>
  4.   4     <meta charset="UTF-8">
  5.   5     <title>Title</title>
  6.   6 </head>
  7.   7 <body>
  8.   8     <p id="p1"></p>
  9.   9     <h1 id="header"></h1>
  10.  10     <img id="image" src="landscape1.jpg" width="160" height="120">
  11.  11     <hr>
  12.  12     <p id="p2">Hello World!</p>
  13.  13     <p id="p3">Hello World!</p>
  14.  14     <button type="button" onclick="document.getElementById('p2').style.color = 'red'">点击改变上面的Hello World！的颜色</button>
  15.  15     <input type="button" value="隐藏文本" onclick="document.getElementById('p2').style.visibility='hidden'"/>
  16.  16     <input type="button" value="显示文本" onclick="document.getElementById('p2').style.visibility='visible'"/>
  17.  17
  18.  18     <hr>
  19.  19     <button id="myBtn">点这里</button>
  20.  20     <p id="demo"></p>
  21.  21     <hr>
  22.  22     <input type="text" id="fname" onchange="myFunction()" placeholder="离开输入框后，小写字母转为大写字母"><!--onchange 事件常结合对输入字段的验证来使用-->
  23.  23     <hr><h1>鼠标放在元素上，改变内容</h1>
  24.  24     <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: green;width: 120px;height: 30px;padding: 40px;">鼠标移动上面</div><!--onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数；首先当点击鼠标按钮时，会触发 onmousedown 事件（按下鼠标不松手），当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件-->
  25.  25
  26.  26     <hr><h1>实例使用 addEventListener() 方法在同一个按钮中添加多个事件</h1>
  27.  27     <button id="myBtn1">点我改变</button>
  28.  28     <p id="demo1">不同的事件，不同的改变</p>
  29.  29
  30.  30     <hr><h1>添加和移除元素(节点)</h1>
  31.  31         <div id="div1">
  32.  32             <p id="p4">这是一个段落</p>
  33.  33         </div>
  34.  34     <hr><h1>修改所有 &#60 p &#62 元素的背景颜色</h1>
  35.  35         <p>点击按钮修改p元素的背景颜色</p>
  36.  36         <button onclick="myFunction4()">点击改变p元素颜色</button>
  37.  37
  38.  38
  39.  39     <script>
  40.  40         document.write(Date());//绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档
  41.  41         document.getElementById("p1").innerHTML = "新文本！";//改变 HTML 元素的内容
  42.  42         document.getElementById("header").innerHTML = "新标题！";
  43.  43         document.getElementById("image").src = "landscape.jpg";//改变了 <img> 元素的 src 属性
  44.  44         //改变 <p> 元素的样式
  45.  45         document.getElementById("p3").style.color = "blue";
  46.  46         document.getElementById("p3").style.fontFamily = "Arial";
  47.  47         document.getElementById("p3").style.fontSize = "larger";
  48.  48
  49.  49         document.getElementById("myBtn").onclick = function () {displayDate()};
  50.  50         function displayDate() {
  51.  51             document.getElementById("demo").innerHTML=Date();
  52.  52         }
  53.  53         function myFunction() {
  54.  54             var x = document.getElementById("fname");
  55.  55             x.value = x.value.toLocaleUpperCase();
  56.  56         }
  57.  57         function mOver(obj) {
  58.  58             obj.innerHTML = "谢谢";
  59.  59             obj.style.color = "yellow"
  60.  60
  61.  61         }
  62.  62         function mOut(obj) {
  63.  63             obj.innerHTML = "你的鼠标已离开";
  64.  64             obj.style.color = "white"
  65.  65         }
  66.  66
  67.  67         var x = document.getElementById("myBtn1");
  68.  68         x.addEventListener("mouseover",myFunction1);
  69.  69         x.addEventListener("click",myFunction2);
  70.  70         x.addEventListener("mouseout",myFunction3);
  71.  71         function myFunction1() {
  72.  72             document.getElementById("demo1").innerHTML += "鼠标放上来了<br>";
  73.  73             document.getElementById("demo1").style.color = "blue"
  74.  74         }
  75.  75         function myFunction2() {
  76.  76             document.getElementById("demo1").innerHTML +="点击了鼠标<br>";
  77.  77             document.getElementById("demo1").style.color = "red"
  78.  78         }
  79.  79         function myFunction3() {
  80.  80             document.getElementById("demo1").innerHTML +="鼠标移走了<br>";
  81.  81             document.getElementById("demo1").style.color = "black"
  82.  82         }
  83.  83         window.addEventListener("resize",function () {//重置浏览器的窗口触发 "resize" 事件句柄
  84.  84             document.getElementById("demo1").innerHTML = Math.random();
  85.  85         });
  86.  86
  87.  87         var para = document.createElement("p");//用于创建 <p> 元素
  88.  88         var node = document.createTextNode("这是一个新的段落");//为 <p> 元素创建一个新的文本节点
  89.  89         para.appendChild(node);//将文本节点添加到 <p> 元素中
  90.  90         var element=document.getElementById("div1");//查找已存在的元素
  91.  91         element.appendChild(para);//在一个已存在的元素中添加 p 元素
  92.  92         var child = document.getElementById("p4");
  93.  93         element.insertBefore(para,child);//将新元素添加到开始位置
  94.  94
  95.  95         function myFunction4() {
  96.  96             var myCollection = document.getElementsByTagName("p");
  97.  97             for(var i = 0; i<myCollection.length; i++){
  98.  98                 myCollection[i].style.color = "red";
  99.  99             }
  100. 100         }
  101. 101
  102. 102
  103. 103     </script>
  104. 104 </body>
  105. 105 </html>

JS_简单的效果-鼠标移动、点击、定位元素、修改颜色等的更多相关文章

  1. JS实现鼠标经过用户头像显示资料卡的效果，可点击

    基于项目的须要.须要制作出例如以下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料.事实上也就是类似QQclient的那种功能. 网上找了非常多代码,基本都实现了鼠标悬浮之后弹 ...

  2. Query 一些简单的效果

    Query 一些简单的效果 $(selector).hide(speed,callback); 隐藏 $(selector).show(speed,callback); 显示 $(selector). ...

  3. jquery 实现重复点击一个元素时不重复执行效果

    jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...

  4. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  5. 鼠标模拟点击a标签

    今天写程序遇到的,想要用鼠标模拟点击a标签 html代码如下: <a id="jump"></a> js代码如下: var page = ....; $(' ...

  6. 网页上记录鼠标的点击次数和一段有用的php代码，自己学习使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. iOS开发——实用技术OC篇&简单抽屉效果的实现

    简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一 ...

  8. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  9. 本元鼠标自动点击器 v1.31 官方绿色版

    软件名称: 本元鼠标自动点击器软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 516KB图片预览: 软件简介:本元鼠标自动点击器是一款免费绿色版的鼠标自动点击器, ...

随机推荐

  1. 解决centos7服务器shadows已启动但是无法连接的问题

    firewall-cmd --permanent --add-port=8989/tcp firewall-cmd --reload 这是由于centos7防火墙并没有开放ss端口的问题 添加json ...

  2. sqlmap之waf绕过

    #一点补充 在老版本的安全狗中,可通过构造payload: http://xx.xx.xx.xx/sqli-labs/Less-2/index.php/x.txt?id=1 and 1=1 可通过in ...

  3. ArrayList如何实现插入的数据按自定义的方式有序存放？

    编程思路是:实现一个类对ArrayList进行包装,当程序试图向ArrayList中放入数据时,程序将先检查该元素与ArrayList集合中其他元素的大小,然后将该元素插入到指定位置. class M ...

  4. Linux 系统下你关注过哪些内核参数，说说你知道的？

    Tcp/ip io cpu memorynet.ipv4.tcp_syncookies = 1#启用syncookiesnet.ipv4.tcp_max_syn_backlog = 8192#SYN队 ...

  5. 2020/12/28为止好用的PC下载工具

    IDM:http://www.internetdownloadmanager.com/ NDM(免费):http://www.neatdownloadmanager.com/index.php/en/ ...

  6. 学习MFS（五）

     ########################################################## mfs master 安装 建议 cp eth0 eth0:0 ifup eth ...

  7. Arthas之实例操作

    Arthas之实例操作 1. 静态类属性操作 获取public静态属性 ognl -c 7cd84586 '@com.system.framework.ArtahsDemoClassLoader@pu ...

  8. 数据结构：DHUOJ 删除链表的顺数及倒数第N个节点

    删除链表的顺数及倒数第N个节点 作者: turbo时间限制: 1S章节: DS:数组和链表 题目描述: 可使用以下代码,完成其中的removeNth函数,其中形参head指向无头结点单链表,n为要删除 ...

  9. DASCTF Oct吉林工师web

    迷路的魔法少女 进入环境给出源码 <?php highlight_file('index.php'); extract($_GET); error_reporting(0); function ...

  10. PokemonGo：LBS游戏开发

    写在前面 去吧!皮卡丘!小时候拥有一台任天堂是多少熊孩子的梦想,每个夜晚被窝里透出的微弱光线,把小小的童年带入另一个世界,家门口的鸟和狗,森林里的虫和瀑布,山洞里的超音蝠,带着小小的梦,走过一个个城市 ...