33 JavaScript

吐槽君 分类:javascript

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(表达式){
  case1:
    语句1;
    break;
  case2:
    语句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>
 

回复

我来回复
  • 暂无回复内容