JS_简单的效果-鼠标移动、点击、定位元素、修改颜色等 

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

 

posted @ 2020-08-12 13:46  白月如初12138  阅读(1120)  评论(0)    收藏  举报