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>修改所有 < p > 元素的背景颜色</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>
JS_简单的效果-鼠标移动、点击、定位元素、修改颜色等的更多相关文章
- JS实现鼠标经过用户头像显示资料卡的效果，可点击
基于项目的须要.须要制作出例如以下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料.事实上也就是类似QQclient的那种功能. 网上找了非常多代码,基本都实现了鼠标悬浮之后弹 ...
- Query 一些简单的效果
Query 一些简单的效果 $(selector).hide(speed,callback); 隐藏 $(selector).show(speed,callback); 显示 $(selector). ...
- jquery 实现重复点击一个元素时不重复执行效果
jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 鼠标模拟点击a标签
今天写程序遇到的,想要用鼠标模拟点击a标签 html代码如下: <a id="jump"></a> js代码如下: var page = ....; $(' ...
- 网页上记录鼠标的点击次数和一段有用的php代码，自己学习使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- iOS开发——实用技术OC篇&简单抽屉效果的实现
简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一 ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- 本元鼠标自动点击器 v1.31 官方绿色版
软件名称: 本元鼠标自动点击器软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 516KB图片预览: 软件简介:本元鼠标自动点击器是一款免费绿色版的鼠标自动点击器, ...
随机推荐
- Water 2.5.6 发布，一站式服务治理平台
Water(水孕育万物...) Water 为项目开发.服务治理,提供一站式解决方案(可以理解为微服务架构支持套件).基于 Solon 框架开发,并支持完整的 Solon Cloud 规范:已在生产环 ...
- 漫长的旅途--C++primer学习-命名空间以及类的自动转换和强制转换
C++用名称空间来控制名称的作用域: 1不同命名空间的同名变量可以同时存在,不会发生冲突 2命名空间不能出现在代码块中 3我们用作用域运算符::,使用空间名来限定名称,最常用的std::cout 4u ...
- 使用Redis实现关注好友的功能
现在很多社交都有关注或者添加粉丝的功能, 类似于这样的功能我们如果采用数据库做的话只是单纯得到用户的一些粉丝或者关注列表的话是很简单也很容易实现, 但是如果我想要查出两个甚至多个用户共同关注了哪些人或 ...
- win10关于后缀名无法关联相应程序默认打开方式的处理方法
系统:win10 专业版 现象:以".chm"文件为例,每次都要重新选择一次打开方式才能打开chm文件,无法设置默认打开方式. 解决方法: 1.win+r打开运行,输入regedi ...
- 简单 Linux 文件系统？
在 Linux 操作系统中,所有被操作系统管理的资源,例如网络接口卡.磁盘驱动器.打印机.输入输出设备.普通文件或是目录都被看作是一个文件.也就是说在 Linux 系统中有一个重要的概念**:一切都是 ...
- 202A 202B 202C 202D 202E字符的作用及解释
这里你会发现在值的前后有2个\u开头的控制字符:转换网址:http://www.jsons.cn/utf8/ 解释:https://blog.csdn.net/haiyan1111/article/d ...
- sleep()和wait()的区别？notify()和notifyAll()的区别？start()和run()的区别？
sleep()和wait()的区别? 这两个方法来自不同的类分别是Thread和Object sleep方法没有释放锁,而wait方法释放了锁,使得其他线程可以使用同步控制块或者方法.wait,not ...
- Math.round(11.5) 等于多少？Math.round(-11.5)等于 多少？
Math.round(11.5)的返回值是 12,Math.round(-11.5)的返回值是-11.四舍五 入的原理是在参数上加 0.5 然后进行下取整.
- 设计一个简单的devops系统
前言 公司设计的RDMS挺好用的,我也照猫画虎简单的设计一个DevOps系统,与大家分享,不足之处欢迎拍砖,以免误人子弟 前置条件 gitlab gitlab-runner k8s 1. gitlab ...
- pip freeze ＞ requirements.txt` 命令输出文件中出现文件路径而非版本号
pip freeze > requirements.txt 命令输出文件中出现文件路径而非版本号 解决办法: pip list --format=freeze > requirements ...