鼠标控制事件

鼠标事件

1.onclick事件

基本语法
<标签 onclick=”JavaScript代码”></标签>
功能
鼠标单击左键时执行JavaScript代码。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         alert("hello呀！");
  10.       }
  11.     </script>
  12. </head>
  13. <body>
  14. <input type="button" value="按钮" style="width:100%;height:50px" onclick="hello()"/>
  15. </body>
  16. </html>

代码讲解

onclick=”hello()” 鼠标点击按钮执行hello函数

2.onmousedown

基本语法
<标签 onmousedown=”JavaScript代码”></标签>
功能
鼠标按钮被按下时执行JavaScript代码。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         alert("hello呀！");
  10.       }
  11.     </script>
  13. </head>
  14. <body>
  16. <input type="button" value="按钮" style="width:100%;height:50px" onmousedown="hello()"/>
  18. </body>
  19. </html>

代码讲解

onmousedown =”hello()” 按钮被按下时执行hello函数

3.onmouseup事件

基本语法
<标签 onmouseup=”JavaScript代码”></标签>
功能
鼠标按钮被释放后执行JavaScript代码。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         alert("hello呀！");
  10.       }
  11.     </script>
  13. </head>
  14. <body>
  16. <input type="button" value="按钮" style="width:100%;height:50px" onmouseup="hello()"/>
  18. </body>
  19. </html>

代码讲解

onmousedown =”hello()” 按钮被按下鼠标松开后执行hello函数

4. onmousemove事件

基本语法
<标签 onmousemove=”JavaScript代码”></标签>
功能
鼠标在元素内部移动时执行JavaScript代码。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         alert("hello呀！");
  10.       }
  11.     </script>
  13. </head>
  14. <body>
  16. <input type="button" value="按钮" style="width:100%;height:50px" onmousemove="hello()"/>
  18. </body>
  19. </html>

代码讲解

onmousemove =”hello()” 鼠标在按钮内部移动时执行hello函数

5. onmouseover事件

基本语法
<标签 onmouseover=”JavaScript代码”></标签>
功能
鼠标移入目标元素上方执行JavaScript代码。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         alert("hello呀！");
  10.       }
  11.     </script>
  13. </head>
  14. <body>
  16. <input type="button" value="按钮" style="width:100%;height:50px" onmouseover="hello()"/>
  18. </body>
  19. </html>

代码讲解

onmouseover =”hello()” 鼠标移入按钮上方执行hello函数

6.onmouseout事件

基本语法
<标签 onmouseout=”JavaScript代码”></标签>
功能
鼠标移出目标元素上方执行JavaScript代码。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         alert("hello呀！");
  10.       }
  11.     </script>
  13. </head>
  14. <body>
  16. <input type="button" value="按钮" style="width:100%;height:50px" onmouseout="hello()"/>
  18. </body>
  19. </html>

代码讲解

onmouseout =”hello()” 鼠标在按钮上方移出后执行hello函数

常用的事件

事件名称 作用
onclick 鼠标单击
ondblclick 鼠标双击
onmousedown 按下鼠标按键
onmouseup 松开鼠标按键
onmouseover 鼠标指针移动到标签上
onmouseout 鼠标从标签上移开
onmousemove 鼠标被移动
onkeydown 按下键盘按键
onkeyup 松开键盘按键
onkeypress 敲击键盘按键
onchange 用户改变域的内容
onfocus 标签获得焦点
onblur 标签失去焦点
onsubmit 提交按扭被点击
onreset 重置按扭被点击
onresize 窗口尺寸被调整
onload 页面加载完成
onunload 用户退出页面

JavaScripg选择器

1.id选择器

基本语法
document.getElementById(“id名称”);
功能
通过 id 找到 HTML 元素。
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         var a = document.getElementById("div1");
  10.         a.style.backgroundColor = "orange";
  11.       }
  12.     </script>
  14. </head>
  15. <body>
  17. <input type="button" value="按钮" style="width:100%;height:50px" onclick="hello()"/>
  18.     <br/><br/><br/>
  19. <div id="div1">这是div1</div>
  20. </body>
  21. </html>

image.png
代码讲解
通过id获取元素
function hello(){
var a = document.getElementById(“div1”);
a.style.backgroundColor = “orange”;
}
var a = document.getElementById(“div1”); 获取id为div1的元素
a.style.backgroundColor = “orange”; 给元素设置背景色为桔色

2.class选择器

基本语法
document.getElementsByClassName(“class名称”);
功能
通过类名找到 HTML 元素。
一个文档中的 class属性可能不唯一，getElementsByClassName() 方法返回的是元素的数组，而不是一个元素。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         var arr = document.getElementsByClassName ("div1");
  10.         for(var i = 0;i<arr.length;i++){
  11.           arr[i].style.backgroundColor = "orange";
  12.         }
  13.       }
  15.     </script>
  16. </head>
  17. <body>
  19. <input type="button" value="按钮" style="width:100%;height:50px" onclick="hello()"/>
  20.     <br/><br/><br/>
  21. <div class="div1">这是div1</div>
  22. <div class="div1">这是div2</div>
  23. </body>
  24. </html>

image.png

3.name选择器

基本语法
document.getElementsByName(“class名称”);
功能
通过查询元素的 name 属性，获取页面元素。
一个文档中的 name 属性可能不唯一，getElementsByName()方法返回的是元素的数组，而不是一个元素。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  7. <script type="text/javascript">
  8.       function hello(){
  9.         var arr = document.getElementsByName("div1");
  10.         for(var i = 0;i<arr.length;i++){
  11.           arr[i].style.backgroundColor = "orange";
  12.         }
  13.       }
  15.     </script>
  16. </head>
  17. <body>
  19. <input type="button" value="按钮" style="width:100%;height:50px" onclick="hello()"/>
  20.     <br/><br/><br/>
  21. <div name="div1">这是div1</div>
  22. <div name="div1">这是div2</div>
  23. </body>
  24. </html>

代码讲解
通过name属性获取元素
function hello(){
var arr = document.getElementsByName(“div1”);
for(var i = 0;i arr[i].style.backgroundColor = “orange”;
}
}
var arr = document.getElementsByName(“div1”); 获取name名为div1的所有元素
for(var i = 0;i<arr.length;i++) 遍历arr数组
arr[i].style.backgroundColor = “orange”; 给每个元素设置背景色为桔色

4.标签选择器

基本语法
document.getElementsByTagName(“标签”);
功能
通过标签名查找 HTML 元素。
例子

  1. <html>
  2. <head>
  3. <title>JavaScript示例</title>
  4. <meta charset="utf-8" />
  6. <script type="text/javascript">
  7.       function hello(){
  8.         var arr = document.getElementsByTagName("div");
  9.         for(var i = 0;i<arr.length;i++){
  10.           arr[i].style.backgroundColor = "orange";
  11.         }
  12.       }
  14.     </script>
  15. </head>
  16. <body>
  18. <input type="button" value="按钮" style="width:100%;height:50px" onclick="hello()"/>
  19.     <br/><br/><br/>
  20. <div >这是div1</div>
  21. <div >这是div2</div>
  22. </body>
  23. </html>

操纵标签属性

操纵标签属性

1..获取标签属性值

基本语法
var变量 = 标签对象.属性名;
功能
用于获取标签的某个属性的值。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     <font color="green" size="6" id="font1">文本内容</font>
  8.   <img src="/res/htmlclassics/full/images/page2_bg.png" width="200" id="img1" />
  10.     <script type="text/javascript">
  11.       var fontObj = document.getElementById("font1");
  12.       var fontSize = fontObj.size;
  13.       var fontColor = fontObj.color;
  14.       alert(fontSize+fontColor);
  15.     </script>
  16. </body>
  17. </html>

image.png
代码讲解
获取标签属性值
var fontObj = document.getElementById(“font1”);
var fontSize = fontObj.size;
var fontColor = fontObj.color;
var fontObj = document.getElementById(“font1”); 获取font标签元素
var fontSize = fontObj.size; 获取font标签元素的大小
var fontColor = fontObj.color; 获取font标签元素的颜色

2.设置标签属性值

基本语法
标签对象.属性名 = 值;
功能
用于设置标签的某个属性值。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     <font color="green" size="6" id="font1">文本内容</font>
  8.   <img src="/res/htmlclassics/full/images/page2_bg.png" width="200" id="img1" />
  10.     <script type="text/javascript">
  11.       var fontObj = document.getElementById("font1");
  12.       fontObj.size = 20;
  13.       fontObj.color = "orange";
  14.     </script>
  15. </body>
  16. </html>

image.png
代码讲解
设置标签属性值
var fontObj = document.getElementById(“font1”); 获取font标签元素
fontObj.size = 20; 设置font标签元素的大小为20
fontObj.color = “orange”; 设置font标签元素的颜色为桔色

3.标签offset属性

基本语法
var 变量 = 标签对象.offsetWidth;
var 变量 = 标签对象.offsetHeight;
var 变量 = 标签对象.offsetLeft;
var 变量 = 标签对象.offsetTop;
功能
offsetWidth 获取标签对象的宽
offsetHeight获取标签对象的高
offsetLeft获取标签对象的宽左边距
offsetTop获取标签对象的上边距
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     <font color="green" size="6" id="font1">文本内容</font>
  8.   <img src="/res/htmlclassics/full/images/page2_bg.png" width="200" id="img1" />
  10.     <script type="text/javascript">
  11.       var imgObj = document.getElementById("img1");
  12.       var width = imgObj.offsetWidth;
  13.       var height = imgObj.offsetHeight;
  14.       var left = imgObj.offsetLeft;
  15.       var tops = imgObj.offsetTop;
  16.       alert("宽："+width+" 高："+height+" 左："+left+" 上："+tops);
  18.     </script>
  19. </body>
  20. </html>

image.png

4.标签内容属性

基本语法
标签对象.innerHTML
标签对象.innerText
功能
innerHTML设置或获得标签内部html内容
innerText设置或获得标签内容text内容
注意：只有双标签才具有该属性。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     <div id="div1">
  8.       <font color="green" size="6">文本内容</font>
  9.     </div>
  10. <div id="div2">
  11.     <img src="/res/htmlclassics/full/images/page2_bg.png" width="200" />
  12. </div>
  14.     <script type="text/javascript">
  15.       var obj1 = document.getElementById("div1");
  16.       var txt1 = obj1.innerHTML;
  17.       var txt2 = obj1.innerText;
  19.       alert("txt1："+txt1+" txt2："+txt2);
  21.     </script>
  22. </body>
  23. </html>

image.png

操纵标签样式

1.操纵标签style属性

基本语法
标签对像.style.样式名 = 值;
功能
用于设置标签的某个样式。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     <div id="div1">
  8.       <font color="green" size="6">文本内容</font>
  9.     </div>
  11.     <script type="text/javascript">
  13.       var obj1 = document.getElementById("div1");
  14.       obj1.style.width = "1000px";
  15.       obj1.style.height = "120px";
  16.       obj1.style.backgroundColor = "orange";
  19.     </script>
  20. </body>
  21. </html>

image.png

2.操纵标签class属性

基本语法
标签对像.className = 类名;
功能
用于设置标签的样式名。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <style type="text/css">
  6.       .div1{
  7.         width:1000px;
  8.         height:200px;
  9.         background-color:green;
  10.       }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="div1">
  15.       <font color="white" size="6">文本内容</font>
  16.     </div>
  18.     <script type="text/javascript">
  20.       var obj1 = document.getElementById("div1");
  21.       obj1.className = "div1";
  23.     </script>
  24. </body>
  25. </html>

image.png

3.this关键字

基本语法
this.className = 类名;
this.style.样式名 = 值;
功能
this 表示当前对象的一个引用。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <style type="text/css">
  6.       .div1{
  7.         width:1000px;
  8.         height:200px;
  9.         background-color:green;
  10.       }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="div1">
  15.       <font color="orange" size="6">文本内容1</font>
  16.       文本内容2
  17.     </div>
  19.     <script type="text/javascript">
  21.       var obj1 = document.getElementById("div1");
  22.       obj1.onclick = function(){
  23.         this.className = "div1";
  24.         this.style.color = "white";
  25.       }
  27.     </script>
  28. </body>
  29. </html>

image.png

4.事件冒泡

网页控制 - 图10

如上图：
给父标签和子标签都添加点击事件，当在子标签上方点击后同时也会触法父标签的点击事件，这就是事件冒泡。
基本语法

  1. 标签对象.事件名 = function(e){
  2. e.stopPropagation();
  3. }

功能
阻止事件冒泡。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <style type="text/css">
  6.       #div1{
  7.         width:1000px;
  8.         height:200px;
  9.         background-color:green;
  10.       }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="div1">
  15.       <font color="orange" size="6" id="font1">文本内容1</font>
  16.     </div>
  18.     <script type="text/javascript">
  20.       var obj1 = document.getElementById("div1");
  21.       obj1.onclick = function(){
  22.         alert(1)
  23.       }
  24.       var obj2 = document.getElementById("font1");
  25.       obj2.onclick = function(event){
  26.         event.stopPropagation(); 
  27.         alert(2)
  28.       }
  30.     </script>
  31. </body>
  32. </html>

image.png
代码讲解
阻止事件冒泡
var obj2 = document.getElementById(“font1”);
obj2.onclick = function(event){
event.stopPropagation();
alert(2);
}
event.stopPropagation(); 在子标签的方法中设置阻止事件冒泡

操纵视频

操纵
标签

基本语法
视频标签对像.属性名 = 值;
视频标签对像.方法名();
功能
视频标签对像.play() 开始播放视频。
视频标签对像.pause() 暂停当前播放的视频。
视频标签对像.currentTime 设置或返回视频中的当前播放位置（以秒计）。
视频标签对像.muted 设置或返回是否关闭声音。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>复仇者联盟</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body style="text-align:center;">
  9. <video id="vo" width="700" controls src="/res/htmlclassics/full/video/avenger.mp4"></video>
  10.     <br/><br/>
  12. <input type="button" value="播放" onclick="hello1()" />
  13. <input type="button" value="暂停" onclick="hello2()" />
  14. <input type="button" value="设置进度" onclick="hello3()" />
  15. <input type="button" value="静音" onclick="hello4()" />
  17. <script type="text/javascript">
  18.       var video = document.getElementById("vo");
  19.       function hello1(){
  20.           video.play();
  21.       }
  22.       function hello2(){
  23.           video.pause();
  24.       }
  25.       function hello3(){
  26.           video.currentTime = 78;
  27.       }
  28.       function hello4(){
  29.           video.muted = !video.muted;
  30.       }
  31.     </script>
  33. </body>
  34. </html>

image.png
代码讲解
1、播放视频
function hello1(){
video.play();
}
video.play(); 视频播放
2、播放暂停
function hello2(){
video.pause();
}
video.pause(); 视频暂停
3、设计播放时间
function hello3(){
video.currentTime = 78;
}
video.currentTime = 78; 设置播放时间从78秒开始
4、播放视频
function hello4(){
video.muted = !video.muted;
}
video.muted = !video.muted; 视频声音开启或关闭

表单验证

1.获得表单

基本语法
var 变量名 = document.getElementsByName(“表单name”);
var 变量名 = document.getElementById(“表单id”);
功能
document.getElementsByName(“表单name”); 通过表单名称获得表单
document.getElementById(“表单id”); 通过表单id获得表单
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表单验证</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9. <form action="" method="get" name="form1"></form>
  10.     <form action="" method="get" id="form1"></form>
  11.     <script type="text/javascript">
  13.         var formOb1 = document.getElementsByName("form1");
  14.         var formOb2 = document.getElementById("form1");
  15.         alert(formOb1+formOb2);
  16.   </script>
  18. </body>
  19. </html>

image.png
代码讲解
1、通过表单名称获得表单
var formOb = document.getElementsByName(“form1”);
var formOb = document.getElementsByName(“form1”); 通过表单名称获得表单
2、通过表单id获得表单
var formOb = document.getElementById(“form1”);
var formOb = document.getElementById(“form1”); 通过表单id获得表单

2.操纵表单元素

基本语法
document.表单名.表单元素名.属性名=”值”;
document.表单名.表单元素名.style.样式名=”值”;
document.getElementById(“id”).属性名=”值”;
document.getElementById(“id”).style.样式名=”值”;
功能
document.表单名.表单元素名.属性名=”值”;
通过表单名表单元素名设置表单元素的属性
document.表单名.表单元素名.style.样式名=”值”;
通过表单名表单元素名设置表单元素的样式
document.getElementById(“id”).属性名=”值”;
通过表单元素的Id设置表单元素的属性
document.getElementById(“id”).style.样式名=”值”;
通过表单元素的Id设置表单元素的样式
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表单验证</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9. <form action="" method="get" name="form1" id="form1">
  10.         姓名：<input type="text" name="userName" /><br />
  11.         年龄：<input type="text" id="age" /><br />
  12.     </form>
  14.     <script type="text/javascript">
  16. document.form1.userName.value="abc"; 
  17. document.form1.userName.style.fontSize="20px";
  18. document.getElementById("age").value="23";
  19. document.getElementById("age").style.color="green";
  21.   </script>
  23. </body>
  24. </html>

image.png

3.焦点事件

基本语法

功能
onfocus=”函数名()” 当表单元素获得焦点后执行函数
onblur=”函数名()” 当表单元素失去焦点后执行函数
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表单验证</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9. <form action="" method="get" name="form1" id="form1">
  10.         姓名：<input type="text" id="userName" value="输入姓名" onfocus="func1()" onblur="func2()" /><br />
  11.       年龄：<input type="text" id="age" value="输入年龄" /><br />
  12.         <input type="submit" />
  13.     </form>
  15.     <script type="text/javascript">
  16.       function func1(){
  17.         document.getElementById("userName").value = "";
  18.       }
  19.       function func2(){
  20.         var userName = document.getElementById("userName").value;
  21.         alert("姓名：" + userName);
  22.       }
  24.   </script>
  26. </body>
  27. </html>

image.png

4.表单验证

例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表单验证</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9. <form action="http://www.baidu.com" method="get" name="form1" onsubmit="return checkReg()" >
  10.         登录名称：<input type="text" id="userName" /><br /><br />
  11.       登录密码：<input type="password" id="passWord" /><br /><br />
  12.         <input type="submit" value="登录"/>
  13.         <input type="reset" value="重置"/>
  14.     </form>
  16.     <script type="text/javascript">
  18.       function checkReg(){
  19.         var userName = document.getElementById("userName").value;
  20.         if(userName == ""){
  21.           alert("请输入登录名称！");
  22.           return false;
  23.         }
  24.         var passWord = document.getElementById("passWord").value;
  25.         if(passWord == ""){
  26.           alert("请输入登录密码！");
  27.           return false;
  28.         }
  29.       }
  31.   </script>
  33. </body>
  34. </html>

image.png
代码讲解
1、登录名称验证
var userName = document.getElementById(“userName”).value;
if(userName == “”){
alert(“请输入登录名称！”);
return false;
}
var userName = document.getElementById(“userName”).value; 获取登录名称
if(userName == “”) 判断登录名称是否为空
alert(“请输入登录名称！”); 提示填写登录名称
return false; 返回false
2、登录密码验证
var passWord = document.getElementById(“passWord”).value;
if(passWord == “”){
alert(“请输入登录密码！”);
return false;
}
var passWord = document.getElementById(“passWord”).value; 获取登录密码
if(passWord == “”) 判断登录密码是否为空
alert(“请输入登录密码！”); 提示填写登录密码
return false; 返回false

帧频动画

1.帧频动画

（1）定义帧频

基本语法
var 帧频名称 = window.requestAnimationFrame(回调函数);
参数
回调函数指定在更新动画以进行下一次重绘时要调用的函数。
返回值
返回一个long整数值，即请求ID，用于唯一标识回调列表中的条目。
功能
该window.requestAnimationFrame()方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数以在下次重绘之前更新动画。该方法将回调作为在重绘之前调用的参数。回调次数通常为每秒60次。
优点
浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。

（2）关闭帧频

基本语法
window.cancelAnimationFrame(帧频名称);
功能
关闭指定名称的帧频。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>帧频动画</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9.       <div id="div1">0</div>
  10.       <br/><br/>
  11.     <input type="submit" value="开始" onclick="start()"/>
  12.     <input type="reset" value="停止" onclick="stop()"/>
  14.     <script type="text/javascript">
  15.         var num = 0;
  16.         var raf = null;
  17.         function start(){
  18.             num++;
  19.             document.getElementById("div1").innerText=num;
  20.                 raf = window.requestAnimationFrame(start);
  21.         }
  23.         function stop(){
  24.             window.cancelAnimationFrame(raf);
  25.         }
  26.     </script>
  28. </body>
  29. </html>

image.png
代码讲解
1、定义帧频变量 和 数字变量
var num = 0; 定义数字变量
var raf = null; 定义帧频变量
2、设置帧频
function start(){
num++;
document.getElementById(“div1”).innerText=num;
raf = window.requestAnimationFrame(start);
}
num++; 数字累加
document.getElementById(“div1”).innerText=num; 将数字输出在id为div1的标签中
raf = window.requestAnimationFrame(start); 定义帧频并执行
3、关闭帧频
function stop(){
window.cancelAnimationFrame(raf);
}
window.cancelAnimationFrame(raf); 关闭名为raf的帧频

2.定时器动画

（1）定义定时器

基本语法
window.setTimeout(要执行的代码, 等待的毫秒数);
window.setTimeout(JavaScript 函数, 等待的毫秒数);
功能
该方法用于在指定的毫秒数后调用函数或代码。

（2）清除定时器

基本语法
window.clearTimeout(定时器的名称);
功能
清除指定名称的定时器。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>帧频动画</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9.     <div id="div1">0</div>
  10.     <br/><br/>
  11.     <input type="submit" value="开始" onclick="start()"/>
  12.     <input type="reset" value="停止" onclick="stop()"/>
  14.     <script type="text/javascript">
  15.         var num = 0;
  16.         var raf = null;
  17.         function start(){
  18.             num++;
  19.             document.getElementById("div1").innerText=num;
  20.             raf = window.setTimeout(start,10);
  21.         }
  23.         function stop(){
  24.             window.clearTimeout(raf);
  25.         }
  26.   </script>
  28. </body>
  29. </html>

image.png
代码讲解
1、定义定时器变量 和 数字变量
var num = 0; 定义数字变量
var raf = null; 定义帧频变量
2、设置定时器
function start(){
num++;
document.getElementById(“div1”).innerText=num;
raf = window.setTimeout(start);
}
num++; 数字累加
document.getElementById(“div1”).innerText=num; 将数字输出在id为div1的标签中
raf = window.setTimeout(start); 定义定时器并执行
3、清除定时器
function stop(){
window.clearTimeout(raf);
}
window.clearTimeout(raf); 清除名为raf的定时器

添加删除标签

1.创建标签

基本语法
var 变量名 = document.createElement(“标签”);
功能
创建一个标签。
通过 createElenemt()方法可以创建、网页控制 - 图19、

等标签。

2.添加标签

基本语法
var 变量名 = document.createElement(“标签”);
父级元素.appendChild(变量名);
功能
向父元素对象添加最后一个子元素。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>添加、删除标签</title>
  7.     <script type="text/javascript">
  8.         var index = 0;
  9.         function addElement(){
  10.             index++;
  11.             var obj = document.getElementById("div1");
  12.             var descDiv = document.createElement('p');
  13.             obj.appendChild(descDiv);
  15.             //p标签样式
  16.             var cssStr = "width:400px;height:30px;margin-bottom:10px;background-color:#FFFF99;border:1px solid black;line-height:30px;";
  17.             descDiv.style = cssStr;
  18.             //p标签文本
  19.             descDiv.innerHTML = index+' 这是p标签';
  20.         } 
  22.     </script>
  23. </head>
  24. <body>
  25.     <input type="button" value="添加" onclick="addElement()" />
  26.     <div class="main" id="div1"></div>
  27. </body>
  28. </html>

image.png
代码讲解
1、创建并添加p标签
var obj = document.getElementById(“div1”); 获取id为div1的元素
var descDiv = document.createElement(‘p’); 创建p标签
obj.appendChild(descDiv); 将p标签添加的id为div1的标签中
2、设置p标签样式
var cssStr = “width:400px;height:30px;margin-bottom:10px;background-color:#FFFF99;border:1px solid black;line-height:30px;”; 编写样式
descDiv.style = cssStr; 设置p标签的样式
descDiv.innerHTML = index+’ 这是p标签’; 设置标签的文本内容

3.删除标签

基本语法
父级元素.removeChild(子元素);
功能
删除指定元素中的指定的子元素。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>添加、删除标签</title>
  7.     <script type="text/javascript">
  8.         var index = 0;
  9.         function addElement(){
  10.             index++;
  11.             var obj = document.getElementById("div1");
  12.             var descDiv = document.createElement('p');
  13.             obj.appendChild(descDiv);
  15.             //p标签样式
  16.             var cssStr = "width:400px;height:30px;margin-bottom:10px;background-color:#FFFF99;border:1px solid black;line-height:30px;";
  17.             descDiv.style = cssStr;
  18.             descDiv.onclick = function(){
  19.                 dell(descDiv);
  20.             };
  21.             //p标签文本
  22.             descDiv.innerHTML = index+' 点击删除此 p标签';
  23.         } 
  25.         function dell(p){
  26.             var obj = document.getElementById("div1");
  27.             obj.removeChild(p);
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32.     <input type="button" value="添加" onclick="addElement()" />
  33.     <div class="main" id="div1"></div>
  34. </body>
  35. </html>

image.png
代码讲解
1、给p标签添加点击事件
descDiv.onclick = function(){
dell(descDiv);
};
descDiv.onclick = function() 给p标签添加点击事件
dell(descDiv); 执行删除函数
2、设置删除函数
function dell(p){
var obj = document.getElementById(“div1”);
obj.removeChild(p);
}
var obj = document.getElementById(“div1”); 获得id为div1的元素
obj.removeChild(p); 删除指定的p标签

其他事件

1.页面加载事件

基本语法

或
window.onload = function(){
javascript代码
}
功能
用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>复仇者联盟</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9. <div id="div1">div1</div>
  11. <script type="text/javascript">
  13.       window.onload = function(){
  14.           alert(document.getElementById("div1").innerHTML);
  15.       }
  17.     </script>
  18. </body>
  19. </html>

2.窗口重置事件

基本语法

或
window.onresize = function(){
代码
}
功能
用于在窗口或框架被调整大小时执行某个方法。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>复仇者联盟</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9. <div id="div1">div1</div>
  11. <script type="text/javascript">
  13.       window.onresize = function(){
  14.           document.getElementById("div1").innerHTML = document.getElementById("div1").offsetWidth;
  15.       }
  17.     </script>
  18. </body>
  19. </html>

3.鼠标滚轮事件

基本语法
火狐浏览器
document.addEventListener(“DOMMouseScroll”,函数名，布尔值);
说明：布尔值是可选值
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
谷歌浏览器
window.onwheel = 函数名;
功能
当鼠标滚轮在元素上下滚动时执行某个方法。
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>复仇者联盟</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9. <div id="div1">div1</div>
  11. <script type="text/javascript">
  12.       document.addEventListener("DOMMouseScroll",fun1);
  13.       window.onwheel = fun1;
  15.       function fun1(){
  16.           document.getElementById("div1").style.backgroundColor = "green";
  17.       }
  19.     </script>
  20. </body>
  21. </html>

代码讲解
1、页面添加鼠标滚轮事件
document.addEventListener(“DOMMouseScroll”,fun1);
window.onwheel = fun1;
2、编写函数
function fun1(){
document.getElementById(“div1”).style.backgroundColor = “green”;
}
document.getElementById(“div1”).style.backgroundColor = “green”; 鼠标滚轮滚动id为div1的标签背景色变为绿色

4.触屏事件

（1）触屏开始

基本语法
document.addEventListener(“touchstart”,函数名,布尔值);
功能
当手指触摸屏幕时候执行某个函数。

（2）触屏结束

基本语法
document.addEventListener(“touchend”,函数名,布尔值);
功能
当手指从屏幕上离开的时候执行某个函数。
（3）触屏滑动
基本语法
document.addEventListener(“touchmove”,函数名,布尔值);
功能
当手指在屏幕上滑动的时候连续地执行某个函数。
说明：布尔值是可选值
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>复仇者联盟</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  9. <div id="div1">div1</div>
  11. <script type="text/javascript">
  12.       document.addEventListener("touchstart",fun1,false);
  13.       document.addEventListener("touchend",fun2,false);
  14.       document.addEventListener("touchmove",fun3,false);
  16.       function fun1(){
  17.           document.getElementById("div1").style.backgroundColor = "green";
  18.       }
  19.       function fun2(){
  20.         document.getElementById("div1").style.backgroundColor = "orange";
  21.       }
  22.       var num = 0;
  23.       function fun3(){
  24.         num++;
  25.         document.getElementById("div1").innerHTML = num;
  26.           document.getElementById("div1").style.backgroundColor = "red";
  27.       }
  29.     </script>
  30. </body>
  31. </html>

代码讲解
1、touchstart
function fun1(){
document.getElementById(“div1”).style.backgroundColor = “green”;
}
document.getElementById(“div1”).style.backgroundColor = “green”; 当手指触摸屏幕时候id为div1的标签背景色为绿色
2、touchend
function fun2(){
document.getElementById(“div1”).style.backgroundColor = “orange”;
}
document.getElementById(“div1”).style.backgroundColor = “orange”; 当手指从屏幕上离开的时候id为div1的标签背景色为桔色
3、touchmove
var num = 0;
function fun3(){
num++;
document.getElementById(“div1”).innerHTML = num;
document.getElementById(“div1”).style.backgroundColor = “red”;
}
document.getElementById(“div1”).innerHTML = num; 当手指在屏幕上滑动的时候将数字num在id为div1的标签中输出
document.getElementById(“div1”).style.backgroundColor = “red”; 当手指在屏幕上滑动的时候 id为div1的标签背景色为红色