33 JavaScript

锦沐karas
134 阅读8分钟

1 JavaScript介绍

JavaScript是一种网页编程技术，用来向HTML页面添加交互行为，是一种基于对象和事件驱动的解释性脚本语言，直接嵌入HTML页面，由浏览器解释执行代码，不进行预编译(事先不编译，逐行执行)。

JavaScript的组成：

  • ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
  • DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象，更有层次感的管理每一个节点
  • BOM：浏览器对象模型，对浏览器窗口进行访问和操作，使用BOM，可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

2 HTML与JavaScript结合方式

行内脚本

点击按钮，触发弹框

<button onclick="alert('弹框测试')">点我</button>

内部脚本

使用< script> < /script>方式，标准是写在head和body之间，其实写在html文件内就可以。

<body>
  <script>
    alert("弹框");
  </script>
</body>

外部脚本

创建后缀名是.js的文件，通过script标签引进js

<script src="text.js"></script>

上面三种使用js的方式是有优先级的，谁在上面先出现，谁就先执行，这是由JavaScript是解释性语言的特性所决定的。

3 JavaScript的使用

3.1 变量

js是弱类型变量，在定义变量时，虽有的数据类型都是var，比如这样声明变量 var res，虽然声明变量时都是当作var，但是js还是有数据类型的。

数值类型number：不区分整型数值和浮点型数值，所有数字都采用64位浮点格式存储

字符串类型string：首尾由单引号或双引号括起来的字符串

布尔类型boolean：只有两个值true和false，其中参与实际运算时，true=1，false=0

在js中也是有自动类型转换

数字+字符串：数字会转换为字符串
数字+布尔值：true转换为1，false转换为0
字符串+布尔值：布尔值转换为字符串true或false
布尔值+布尔值：布尔值转换为数值1或者0

3.2 数据类型转换函数

在js中存在强制类型转换，通过数据类型转换函数完成数据类型之间的转换，具体的转换函数如下：

  • parseInt 强制转换为整数，注意当无法完成转换时，返回NaN(NaN代表是非数字值的特殊值)
  • parseFloat 强制转换为浮点数，同样无法完成转换时，返回NaN
  • typeof：查询数值当前类型，返回string/number/boolean/object

null在程序中代表无值或者无对象，通过给一个变量赋值为null来清除变量的内容

undefined声明了变量但从未赋值或者对象属性不存在

3.3 运算符

算术运算符：+、-、*、/、%分别对应加减乘除，其中-可以表示减号外，还可以表示负号；而+除了表示加法外，也可以用于字符串的连接。

关系运算符：主要有严格相等 === 和 非严格相等 ==，其中严格相等要求类型和数值都相等时才相等，而非严格相等只要求数值相等即可。

逻辑运算符：逻辑非!、逻辑与&&、逻辑或||，其中逻辑运算要求操作数都是boolean表达式

3.4 控制语句

与java中的控制语句非常相似，下面直接看例子：

if(表达式1){
  
}else if(表达式2){
  
}else if(表达式3){
  
}else{
  
}

switch(表达式){
  case 值1:
    语句1;
    break;
  case 值2:
    语句1;
    break;
  default:
    语句3;
}

for(var i=1;i<5;i++){
  语句快;
}

while(条件){
  语句快;
}

3.5 字符串API

在js中字符串常用方法有:

  • length：获取字符串的长度属性，没有小括号

    var str="java";
console.log(str.length);

  • toUpperCase/toLowerCase：转为大写/小写

    var str="hello world";
console.log(str.toUpperCase());
console.log(str.toLowerCase());

  • charAt(下标)：返回该下标下的字符

    var str="java";
console.log(str.charAt(2))

  • index(字符)：查找字符串中字符出现的首次下标；lastIndexof(字符)：查找字符串中字符最后一次出现的下标

    var str="hello world";
console.log(str.indexof('l'));
console.log(str.lastIndexof('l'));

  • substring(开始,结束)：截取字符串中的一部分，注意是不包含结尾

    var str="hello";
console.log(str.substring(0,2));

  • replace(旧的,新的)：将字符串中旧字符替换为新字符

    var str="python";
var str1=str.replace("on","ee");
console.log(str1);

  • spilt(分割的节点)：一个字符串按照节点分割成多个小字符串，因此返回的是数组类型

    var str="2021-04-06";
var arr=str.spilt("-");
console.log(arr.length);
console.log(arr[1]);

3.6 数组

创建数组

var arr=new Array();

初始化数组的方法(三种)

//第一种
var arr=new Array();
arr[0]=1;
arr[1]=2;

//第二种
var arr=new Array(10,'a',true);

//第三种
var arr=['a',12,false];

数组的相关方法:

  • tostring()将数组转换为字符串

  • join(连接符号)：将数组中的每个元素用连接符号连接成一个新字符串

  • concat(新元素)：将原来的数组连接新元素组成新数组，原数组不变

  • slice(开始,结束)：在数组中提取一部分，形成新的数组，不包含结束

  • reverse()数组的反转

  • sort：实现数组的排序，其中arr.sort()是按字符排序，而arr.sort(func)是按数值排序

    var arr=[1,2,3,4,5];
console.log(arr.tostring());
var str=arr.join('-');
console.log(str);
var arrnew=arr.concat(6,7);
console.log(arrnew);
var arr1=arr.slice(0,2);
console.log(arr1);
var arr2=arr.reverse();
console.log(arr2);
var arr3=[31,12,111,444];
arr3.sotr();
console.log(arr3);
function guize(a,b){
  return a-b;
}
arr3.sort(guize);
console.log(arr3);

3.7 Math数学对象

Math对象用于执行数学任务，使用时无需创建对象，直接把Math当做对象shying就可以调用其所有属性和方法

math.png

3.8 Number对象

Number对象中toFixed方法可以实现四舍五入，具体代码如下:

var x=new Number(12.3);
var n=x.toFixed(2);
console.log(n)//11.30

3.9 正则表达式

对字符串执行模式匹配的强大工具，关于正则表达式的语法是：

reg.png

使用正则表达式的两种方式：

//第一种方式
var age="18";
var red=/^\d{1,3}$/; //正则表达式以/^开始，以$/结束
var res=reg.test(age);
if(b==true){
  console.log("通过");
}else{
  console.log("失败");
}
//第二种方式
var name="abc12";
var reg=new RegExp("^[a-zA-Z0-9]{5,8}$");
if(reg.test(name)){
  console.log("通过");
}else{
  console.log("失败");
}

日期对象的使用:

<script>
        var time=new Date();
        console.log(time);
        var year=time.getFullYear();
        var month=time.getMonth()+1;
        var day=time.getDate();
        var hour=time.getHours();
        var mm=time.getMinutes();
        var s=time.getSeconds();
        var ms=time.getMilliseconds();
        var timestr=year+"年"+month+"月"+day+"号";
        console.log(timestr);
</script>

4 函数

定义函数需要使用关键字function

function 函数名(形参列表){
		函数体;
		return 返回值;
}

注意函数声明后不会立即执行，只有在被调用的时候才会执行，其中形参不要带数据类型；分号是用来分割可执行JavaScript语句，由于函数声明不是一个可执行语句，所以不以分号结尾。

下面以无返回值和有返回值函数为例：

function add(a,b){
  var r=a+b;
  console.log(r);
}
add(1,2);
function muti(a,b){
  return a*b;
}
muti(3,4);

js中可以在函数内部，调用参数列表的属性

function fun(a,b){
  console.log(arguments.length);
  console.log(arguments[1]);
  
}

关于构造函数，可以通过内置的JavaScript函数构造器(Function())定义

var myFunction=new Function("a","b","return a*b"); //函数以分号结尾，是因为它是一个可执行语句
var r=myFunction(4,3);
console.log(r)

下面再看看匿名函数，也就是无名称的函数

var fn=funation(a,b){
  		return a*1+b;

};
console.log(fn(3,4));

在js中是存在全局函数的，我们可以直接调用，全局函数有：

  • isNaN：检查参数是否为非数字值

    console.log(isNaN(123)); //false
console.log(isNaN("hello")); //true

  • eval：转换字符串中的运算

    var str="1+3";
console.log(str); //1+3
console.log(eval(str)); //4

  • encodingURI与decodeURI：用来转码和解码

    var name="java";
console.log("转码前"+name); //java
name=name.encodingURI;
console.log("转码后"+name); 
name=name.decodeURI(name);
console.log("解码后"+name);

5 闭包

闭包：有权访问另一个函数作用域中的变量的函数，一般情况就是一个函数中包含另一个函数。简单来说就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收机制探测到，保证了数据的安全唯一性。

作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理

在开始介绍闭包之前，先了解全局变量和局部变量

a=6;//全局变量，声明的时候可以不用var
function test(){
  b=10;//没有使用var声明，则是全局变量
  var c=12;//局部变量
  console.log(c); //
}
function test1(){
  console.log(c);//报错，c没有被定义
}
test();
test1();

下面看下闭包的应用实例，统计方法的执行次数

function test(){
  var count=0;
  function jia(){
    return count+=1;
  }
  return count;
}
var fn=test();
fn();
fn();
console.log(fn());

闭包就是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。更加直观的说法是形成一个不销毁的栈环境。

闭包的优缺点：

  • 优点：方便调用上下文中声明的局部变量，逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
  • 缺点：使用闭包，可以使函数在执行完后不被销毁，保留在内存中，若果大量使用闭包就会造成内存泄漏，内存消耗很大。

6 弹框输出

  • 普通弹框 alert("hello, java")
  • 控制台日志输出console.log("hello,java")
  • 页面输出document.write("< p>hello,java< /p>")将p标签中的元素输出到body中
  • 确认框confirm("确定删除吗？")
  • 输入框prompt("请输入账号")

7 DOM操作

在html页面中是有很多个标签的，当我们想要动态的修改某个标签的值，那么我们就需要先找到这个标签的元素，这就需要使用DOM。

文档对象模型，将页面中所有的标签元素看成一个对象，主树干定义为根节点，虽有的标签都是从根元素延伸出去的，只要摸清结构，找到某个标签就不难。

在节点树中，顶端节点就是根节点，每个节点都有父节点(除了根节点)，任何一个节点都可以拥有任意数量的字节点，同胞是拥有相同父节点的节点。

实例:

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>hello,DOM</h1>
    <p>我是DOM</p>
</body>
</html>

上面html页面中，html标签没有父节点，因为自己就是根节点，head和body标签的父节点都是html，文本节点"我是DOM"的父节点是p标签。

DOM访问

下面介绍DOM访问，可以实现对页面某个标签元素的访问：

getElementById：通过id属性获得元素节点对象，实例是当账号填写为空时，阻止表单的提交

<body>
    <form action="xxx" onsubmit="return login()">
        <p>账号：<input id="name"></p>
        <p>密码：<input></p>
        <p><button>登录</button></p>

    </form>
    <script>
        function login(){
            var name=document.getElementById("name").value;
            if(name==""){
                alert("账号不能为空");
                return false;

            }else{
                return true;

            }
        }
    </script>
</body>

getElementByName：通过name属性获得元素节点对象集，实例购物车全选

<body>
    <h2>我的购物车</h2>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quanxuan(this)" >全选</td>
            <td>名称</td>
            <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" >0</td>
            <td>脉动</td>
            <td>4</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" >1</td>
            <td>火腿肠</td>
            <td>2</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" >2</td>
            <td>方便面</td>
            <td>1</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" >3</td>
            <td>鸡蛋灌饼</td>
            <td>6</td>
        </tr>
    </table>
    <p><button>提交表单</button></p>
    <script>
        function quanxuan(all){
           var arr=document.getElementsByName("one");
           for(var i=0;i<arr.length;i++){
               arr[i].checked=all.checked;
           }
        }
    </script>
</body>

getElementByTagName：通过标签名称获得节点对象集，实例表格歌行变色

<body>
    <h2>我的购物车</h2>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quanxuan(this)" >全选</td>
            <td>名称</td>
            <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" >0</td>
            <td>脉动</td>
            <td>4</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" >1</td>
            <td>火腿肠</td>
            <td>2</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" >2</td>
            <td>方便面</td>
            <td>1</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" >3</td>
            <td>鸡蛋灌饼</td>
            <td>6</td>
        </tr>
    </table>
    <p><button>提交表单</button></p>
    <script>
        var rows=document.getElementsByTagName("tr");
        for(var i=0;i<rows.length;i++){
            if(i%2==1){
                rows[i].style.backgroundColor="pink";
            }
        }
    </script>
</body>

DOM修改

修改HTML DOM意味着许多不同的方面：

  • 改HTML内容
  • 改CSS样式
  • 改HTML属性
  • 创建新的HTML元素
  • 删除已有的HTML元素
  • 改变事件

改变HTML内容

<body>
    <button onclick="test()">快点我</button>
    <h2 id="hello">你好</h2>
    <script>
        function test(){
            document.getElementById("hello").innerHTML="我要开始学习了";
        }
    </script>
</body>

改变CSS样式

<body>
    <button onclick="test()">快点我</button>
    <h2 id="hello">你好</h2>
    <script>
        function test(){
            document.getElementById("hello").style.color="red";
            document.getElementById("hello").style.fontSize="50px";
        }
    </script>
</body>

添加节点

实现点击按钮，在页面上创建一张图片

<body>
    <button onclick="add()">添加图片</button>
    <div></div>
    <script>
        function add(){
            var img=document.createElement("img");
            img.setAttribute("src","/Users/bijinxiong/VSCode/CSS/pig.jpeg");
            img.setAttribute("title","美女")
            var divs=document.getElementsByTagName("div");
            divs[0].appendChild(img);
        }
    </script>
</body>

删除节点

点击按钮，将页面上的图片删除掉

<body>
    <button onclick="add()">添加图片</button>
    <button onclick="del()">删除图片</button>
    <div></div>
    <script>
        function add(){
            var img=document.createElement("img");
            img.setAttribute("src","/Users/bijinxiong/VSCode/CSS/pig.jpeg");
            img.setAttribute("title","美女");
            img.setAttribute("id","girl");
            var divs=document.getElementsByTagName("div");
            divs[0].appendChild(img);
        }
        function del(){
            var img=document.getElementById("girl");
            img.parentNode.removeChild(img);//必须通过父节点，才能删除掉子节点，需要注意一下


        }
    </script>
</body>

替换节点

点击按钮，将上面创建的图片替换成另一张图片

<body>
    <button onclick="add()">添加图片</button>
    <button onclick="del()">删除图片</button>
    <button onclick="rep()">替换图片</button>
    <div></div>
    <script>
        function add(){
            var img=document.createElement("img");
            img.setAttribute("src","/Users/bijinxiong/VSCode/CSS/pig.jpeg");
            img.setAttribute("title","美女");
            img.setAttribute("id","girl");
            var divs=document.getElementsByTagName("div");
            divs[0].appendChild(img);
        }
        function del(){
            var img=document.getElementById("girl");
            img.parentNode.removeChild(img);//必须通过父节点，才能删除掉子节点，需要注意一下


        }
        function rep(){
            var imgold=document.getElementById("girl");
            var imgnew=document.createElement("img");
            imgnew.setAttribute("src","feng.jpeg");
            imgold.parentNode.replaceChild(imgnew,imgold);
        }
    </script>
</body>

8 DOM操作之事件

js捕获某个动作而做出反馈，HTML页面中常见的例子点击鼠标、网页已加载、图片已加载、鼠标移动到元素上、输入字段被改变、HTML表单被提交、用户触发按键。

窗口事件

只在body和frameset元素中有效

unload 当文档被载入时执行脚本

<body onload="test()">
    <script>
        function test(){
            document.write("我是事件");
        }
    </script>
</body>

表单元素事件

只在表单元素中有效：

unbar 当元素失去焦点时执行脚本

onfocus 当元素获得焦点时执行脚本

<body>
    <form action="">
        <p>账号：<input onfocus="a()" onblur="b()"></p>
        <p>密码：<input></p>
    </form>
    <script>
        function a(){
            console.log("获得焦点，已激活");
        }
        function b(){
            console.log("失去焦点");
        }
    </script>
</body>

鼠标事件

onclick鼠标被单击时执行脚本

ondblclick鼠标被双击时执行脚本

onmouseout当鼠标移出某元素时执行脚本

onmouseover当鼠标悬停于某元素之上时执行脚本

<style>
    img{
        width: 30%;
        border: 5px solid white;
    }
</style>
<body>
    <img src="/Users/bijinxiong/VSCode/CSS/pig.jpeg" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()">
    <img src="/Users/bijinxiong/VSCode/CSS/pig.jpeg" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()">
    <img src="/Users/bijinxiong/VSCode/CSS/pig.jpeg" onmouseover="shang(this)" onmouseout="xia(this)" >
    <script>
        function dan(){
            alert("点一下");
        }
        function shuang(){
            alert("双击两下");
        }
        function shang(img){
            img.style.border="5px solid red";
        }
        function xia(img){
            img.style.border("5px solid white");
        }
    </script>
   
</body>

键盘事件

onkeydown按下去触发脚本

onkeyup弹上来触发脚本

<body>
    <script>
        window.onkeydown=function(){
            if(event.keyCode=="13"){
                alert("登陆成功");
            }
        }
        window.onkeyup=function(){
            console.log(event.keyCode);
        }
    </script>
    
   
</body>

事件冒泡

创建两个div，一个大些，一个小些

<style>
    #da{
        width: 200px;
        height: 200px;
        background: black;
        padding: 10px;
    }
    #xiao{
        width: 100px;
        height: 100px;
        background: greenyellow;
    }
</style>

<body>
   <div id="da">
    <div id="xiao"></div> 
   </div>
   
    <script>
        document.getElementById("da").addEventListener("click",function(){
            alert("父级元素的事件触发"+this.id);

        });
        document.getElementById("xiao").addEventListener("click",function(e){
            e.stopPropagation(); //取消事件的冒泡机制
            alert("子级元素的事件触发"+this.id);

        });

    </script>
   
</body>

事件冒泡机制：先子，后父，事件的触发顺序是自内向外

事件捕获

依旧使用上面的例子

<style>
    #da{
        width: 200px;
        height: 200px;
        background: black;
        padding: 10px;
    }
    #xiao{
        width: 100px;
        height: 100px;
        background: greenyellow;
    }
</style>

<body>
   <div id="da">
    <div id="xiao"></div> 
   </div>
   
    <script>
        document.getElementById("da").addEventListener("click",function(){
            alert("父级"+this.id);

        },true);
        document.getElementById("xiao").addEventListener("click",function(){
            alert("子级"+this.id);

        },true);

    </script>
   
</body>

事件捕获：先父，后子，事件的触发顺序变为自外向内。

9 面向对象OOP

使用object创建通用对象

var student=new Object();
student.name="xiaoming";
student.age=18;
student.study=function(){
  alert("我在学习");
}
student.study();

使用构造函数创建对象

function student(name,age){
  this.name=name;
  this.age=age;
  this.study=function(){
    alert("我在学习")；
  }

}
student s=new student("xiaoming",18);
s.study();

使用直接量

var student={
  name: "xiaoming";
  age: 18;
  study: function(){
    alert("我在学习");
    
  }
};
student.study();

10 JSON

JSON是一种轻量级的数据交换格式，使用JSON传输数据的好处是易于人阅读和编写，同时也易于机器解析和生成。JSON语法格式：

{

​ 属性1: 值1,

​ 属性2: 值2,

​ .......

}

js中使用JSON实例

<body>
    <script>
        var json1={name:"小明",age:18};
        console.log(json1.name+" "+json1.age);
        var zhang={
            name:"zhaoyun",
            sex:"男",
            hobby:["白龙马","长枪","青钢剑"]
        };
        console.log(zhang.hobby[0]);
    </script>

</body>

11 BOM操作

BOM操作是指对浏览器的操作，相关属性介绍如下：

window对象

4.png

<body>
    <button onclick="cha()">百度一下</button>
    <script>
        function cha(){
            window.open("http://baidu.com","百度一下","width=500,height=300,left=400");
        }
    </script>

</body>

Screen屏幕对象

与设备显示器分辨率相关

<body>
    <button onclick="scree()">屏幕分辨率</button>
    <script>
        function scree(){
            alert(window.screen.width+"---"+window.screen.height);
        }
    </script>

</body>

location定位

包含有关当前URL的信息，通常用来完成页面的跳转

<body>
    <button onclick="test()">跳转</button>
    <script>
        function test(){
            console.log("当前页面地址："+location.href);
            location.reload();
            location.href="http://baidu.com";
        }
    </script>

</body>

history浏览器历史

history对象会记录浏览器的痕迹

a.html

<a href="b.html">去b页面</a>

b.html

<button onclick="hui()">返回</button>
<script>
  function hui(){
    history.back();
  }
</script>

navigator导航

window.navigator对象包含有关访问者浏览器的相关信息

<body>
   <script>
       var str="";
       str+="<p>浏览器名称:"+navigator.appName+"</p>";
       str+="<p>浏览器版本:"+navigator.appVersion+"</p>";
       document.write(str);
   </script>

</body>

12 存储对象

js中存储对象类似java中的map，以键值对的方式存数据

本地存储localStorage

在关闭窗口或标签页之后将会删除这些数据

  • 保存数据

    localStorage.setItem("name","xiaoming");

  • 提取数据

    localStorage.getItem("name");

  • 删除数据

    localStorage.removeItem("name");

实例

//三种方式保存数据
       localStorage["a"]=1;
       localStorage.b=2;
       localStorage.setItem("c",3);
       console.log(typeof localStorage["a"]);
       //三种方式读取
       var a=localStorage.a;
       console.log(a);
       var b=localStorage["b"];
       console.log(b);
       var c=localStorage.getItem("c");
       console.log(c);

会话存储sessionStorage

会话，就是保持浏览器别关闭，关闭浏览器就等于结束一次会话，开启浏览器即意味着创建一次会话。

  • 保存数据

    sessionStorage.setItem("name","xiao");

  • 提取数据

     var l=sessionStorage.getItem("name");

  • 删除指定键的数据

    sessionStorage.removeItem("name");

  • 删除所有数据

    sessionStorage.clear();

案例：记录点按钮的次数

<body>
  <button onclick="dian()">点我</button>
  <h3 id="result"></h3>
  <script>
      function dian(){
          if(sessionStorage.getItem("clickCount")){
              sessionStorage.setItem("clickCount",Number(sessionStorage.getItem("clickCount"))+1);
          }else{
              sessionStorage.setItem("clickCount",1);
          }
          document.getElementById("result").innerHTML="已经点击了"+sessionStorage.getItem("clickCount")+"次"
      }
  </script>

</body>

13 计时操作

13.1 周期定时器

setInterval(1,2)：周期性触发代码exp，其中1:执行语句，2:时间周期，单位为毫秒

实例：闪烁的字体

<body>
  <h1 id="title">我的滑板鞋时尚</h1>
  <script>
      var colors=["red","blue","yellow","pink","orange"];
      var i=0;
      function bian(){
          document.getElementById("title").style.color=colors[i++];
          if(i==colors.length){
              i=0;
          }
      }
      setInterval(bian,100);
  </script>

</body>

在上面闪烁字体的基础上，加上闪烁的电子时钟

<body>
  <h1 id="title"></h1>
  <script>
      var colors=["red","blue","yellow","pink","orange"];
      var i=0;
      function bian(){
          document.getElementById("title").style.color=colors[i++];
          if(i==colors.length){
              i=0;
          }
      }
      function time(){
          var d=new Date();
          var str=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
          document.getElementById("title").innerHTML=str;
      }
      setInterval(bian,1000);
      setInterval(time,1000);
  </script>

</body>

13.2 停止计时器

实例：模拟年会抽奖

<body>
  <img id="tu" src="1.jpeg" width="50%"/>
  <br/>
  <button onclick="begin()">开始</button>
  <button onclick="stop()">停止</button>
  <script>
      var arr=["pig.jpeg","1.jpeg","2.jpeg"];
      function begin(){
          timer=setInterval(bian,100);
      }
      function stop(){
          clearInterval(timer);//停止计时器
      }
      function bian(){
          var i=Math.floor(Math.random()*arr.length);
          document.getElementById("tu").src=arr[i];
      }
  </script>
  


</body>

13.3 一次性定时器

一次性定时器相当于延时效果，只执行一次

<script>
       function bian(){
           document.body.style.backgroundColor="red";
       }
       setTimeout(bian,1000);
   </script>
avatar
文章
阅读
粉丝