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. C++图像处理算法入门前言

    一  前言 由于面试时,很多面试官一直强调算法才是根本,编代码不是.有以下两个原因: 第一个原因:即要想成为一名合格的应用工程师(不管是软件还是硬件),都得以学习算法,动手实现算法为核心,这才是核心竞 ...

  2. 面试官:volatile关键字用过吧?说一下作用和实现吧

    volatile    可见性的本质类似于CPU的缓存一致性问题,线程内部的副本类似于告诉缓存区 面试官:volatile关键字用过吧?说一下作用和实现吧 https://blog.csdn.net/ ...

  3. eclipse启动指定jvm的版本

    参阅:https://www.eclipse.org/forums/index.php/t/1105435/ https://wiki.eclipse.org/Eclipse.ini#-vm_valu ...

  4. Spring框架的事务管理有哪些优点?

    它为不同的事务API  如 JTA,JDBC,Hibernate,JPA 和JDO,提供一个不变的编程模式. 它为编程式事务管理提供了一套简单的API而不是一些复杂的事务API如 它支持声明式事务管理 ...

  5. SpringMvc怎么和AJAX相互调用的?

    通过Jackson框架就可以把Java里面的对象直接转化成Js可以识别的Json对象.具体步骤如下 : (1)加入Jackson.jar (2)在配置文件中配置json的映射 (3)在接受Ajax方法 ...

  6. 如果我不输入<!DOCTYPE HTML>,HTML 5能工作吗?

    No,浏览器将无法识别HTML文件,并且HTML 5标签将无法正常工作.

  7. Samba通过Openldap统一认证

    1.环境准备1.1.实验环境[root@moban ~]# cat /etc/redhat-releaseCentOS release 6.8 (Final)[root@moban ~]# uname ...

  8. 技术架构:IT生存之道

    Technical architecture: What IT does for a living (cio.com) Technical architecture: What IT does for ...

  9. css3中什么时候用transition什么时候用animation实现动画

    在css3中transition和animation都可以实现动画效果,但是我们什么时候用transition,什么时候用animation. 当有事件触发动画的时候我们就用transition.比如 ...

  10. CSS入门指南-4:页面布局

    这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...