JavaScript计时器数组正则

最新推荐文章于 2024-03-21 16:25:57 发布

cxz_dong

最新推荐文章于 2024-03-21 16:25:57 发布

阅读量331

点赞数

分类专栏： html 文章标签： javascript html

本文链接：https://blog.csdn.net/cxz_dong/article/details/110929201

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

计时器

计时器技术实现了不使用循环代码，轮训执行函数的功能，在JS当中，计时器分为两种：

轮询计时：每间隔一个时间，执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span id="span_id">看数字变化</span>
    <button id="stop">停</button>
    <script>
        var number = 0;
        var span = document.getElementById("span_id");
        var interval = setInterval(
            function () { //计时器执行的功能
                number+=10;
                span.innerText=number;
                
            },100 //功能执行的间隔时间，单位是毫秒，1000毫秒 = 1秒
        );
        var stop = document.getElementById("stop");
        stop.onclick = function (ev) {
            clearInterval(interval)//停止interval计时器
        }

    </script>
</body>
</html>

倒计时：到达指定的时间长度

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <span id="span_id">hello</span>
        <button id="stop">停</button>
        <script>
            var span = document.getElementById("span_id");
            var timeout = setTimeout(
                function () {
                    span.style.fontSize = "300px"
                },2000
            ); //2000毫秒之后执行
            var stop = document.getElementById("stop");
            stop.onclick = function (ev) {
                clearTimeout(timeout)//停止timeout倒计时计时器
            };

        </script>
    </body>
</html>

方法	描述
setInterval	轮询执行
setTimeout	倒计时执行
clearInterval	清除轮询计时器
clearTimeout	清除倒计时

计时器可以停止，但不能够再次开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .timer{
            width: 300px;
            height: 50px;
            border: 5px black solid;
            border-radius: 5px;
            margin: 200px auto;

            font-size: 48px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div id="timer" class="timer">
        <!--00:00:10-->
    </div>
    <script>
        var number = 200;
        var timer = document.getElementById("timer"); //获取时间盒子
        var interval = setInterval( //设置轮询计时器
            function () { //计时器的功能函数
                if(number<10){ //判断 number个位数
                    t = "0"+number // 对个位数进行补全
                }else {
                    t = number //对于两位数不做处理
                }
                timer.innerText = "00:00:"+t; //设置时间的内容，会覆盖之前的内容
                if(number<=0){ //判断number为负数
                    clearInterval(interval) //清除计时器
                }else {
                    number -= 1 //如果数字大于0，每次执行减一
                }
            },1000 //执行频率是每秒1次
        )
    </script>
</body>
</html>

时间

时间在计算机当中，有几个常识：

1、时间戳：距离1970年1月1日0时过来多少秒。

2、时区：

UTC 0时区

中国官方时间东八区上海

时差8个小时

3、夏令时

人为拨快1个小时

4、闰秒

61秒，由于地球公转偏转导致。

方法	描述
getTime	获取时间戳，毫秒单位
getFullYear	获取年份
getMonth	获取月份，从0开始计算
getDate	获取日
getHours	获取当前时
getMinutes	获取当前分
getSeconds	获取当前秒
getDay	获取周几

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            var date = new Date(); //创建了时间对象
            // var t = date.getTime(); //返回时间戳 毫秒
            // console.log(t)
            // var year = date.getFullYear(); //年
            // console.log(year)
            // var month = date.getMonth(); //月
            // console.log(month)
            // var day = date.getDate() //日
            // console.log(day)
            // var hours = date.getHours(); //时
            // console.log(hours);
            // var minutes = date.getMinutes(); //分
            // console.log(minutes);
            // var seconds = date.getSeconds(); //秒
            // console.log(seconds)
        </script>
    </body>
</html>

数学

方法	描述
max	取最大值，只针对数字
min	取最小值，只针对数字
floor	向下取整
ceil	向上取整
round	四舍五入
random	1-0之间的随机数
abs	绝对值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log(Math.max(4,5)); //最大值
        console.log(Math.min(4,5)); //最小值
        console.log(Math.floor(3.14)); //向下取整
        console.log(Math.ceil(3.14)); //向上取整
        console.log(Math.round(3.6)); //四舍五入
        for(var i = 0; i< 100;i++){
            console.log(parseInt(Math.random()*10)); //0-1的随机数
        } 
    </script>
</body>
</html>

数组

JS的数组类似Python的列表，是JS当中存放数据的一种复合类型数据类型。

数组一种有序的，可以修改的，元素以逗号分隔，以中括号包围的的数据类型。

数组的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
    //方法1
        var array = new Array(1,2,"a","b");
        console.log(array);
        console.log(typeof(array));
	//方法二(推荐)
        var array_other = [1,2,"a","b"];
        console.log(array_other);
        console.log(typeof(array_other));
    </script>
</body>
</html>

1、数组可以是JS当中的有序的序列，所有有索引：

var array_other = [1,2,"a","b"];
console.log(array_other[0]);
console.log(array_other[0]);
array_other[0] = 3;
console.log(array_other);
var num = array_other[0];
array_other[0] = array_other[1];
array_other[1] = num;
console.log(array_other)

2、数组当中可以存放多种类型的数据，比如函数，dom对象。

var array = [
    function () {
        console.log("func1")
    },
    function () {
        console.log("func2")
    },
    function () {
        console.log("func3")
    },
    function () {
        console.log("func4")
    }
]; 
console.log(array);
var p = document.getElementsByTagName("p");
console.log(p)

数组添加数据

方法	描述
push	尾部追加
unshift	头部添加

var array = [];
array.push(1); //追加
array.push(2);
array.unshift(3); //从头加
console.log(array)

数组获取数据

数组可以通过索引进行数据的获取

在JS当中可以通过length来获取序列的长度

console.log(array.length)

数组删除数据

方法	描述
pop	从尾部删除并返回数据
shift	从头部删除并返回数据

var array = [];
array.push(1); //追加
array.push(2);
array.push(6);
array.unshift(3); //从头加
console.log(array);
console.log(array.length)
console.log(array.pop());
console.log(array.shift(1));
console.log(array);

数组修改数据

splice 方法，三个参数

修改的起始索引位置

修改的长度

要替换的内容

array.splice(0,1,1);
console.log(array);
array.splice(0,2,1,2,3); //[1, 2, 3, 2, 6]
console.log(array);

正则

高级的字符串处理方式，通常用于字符串内容的匹配和校验。正则是通过描述字符串对象的类型和数量来实现匹配的。

JS正则的方法

方法	描述
test	校验匹配内容是否存在，返回 true或者false
exec	校验配置内容，在主体当中的位置

var res = '/\d/'; //定义正则
console.log(res.test("1234")); //测试后面的字符串当中是否有1个数字
console.log(res.exec("1234")) //测试后面的字符串当中是否有1个数字

JS正则内容的描述

正则	描述
\w	匹配字母数字下划线
\d	匹配数字
\s	匹配空格
[]	匹配当中的任意一个元素
()	组匹配，将括号外的匹配作为匹配的条件
原样匹配	直接在正则当中使用字母或者数字，比如匹配用户名当中包含admin
所有大写匹配	大写取反 \W \D \S
.	匹配所有非换行字符

组匹配举例：

\d\d:匹配连续的两个数字

\d(\d):匹配一个前面是一个数字的数字

JS正则数量的描述

匹配	描述
*	匹配0-多，尽可能多匹配贪婪匹配<div id=‘hello’> (.*)</div>
？	匹配0-1次
+	匹配1到多次
{n}	匹配n次
{n,m}	匹配n到m次

JS正则特殊的描述

匹配	描述
^	默认匹配开头，在[]当中代表非
$	结尾
i	忽略大小写匹配
m	.完全匹配，多行匹配
s	.忽略换行符匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var res = /^a/i; //定义正则
        console.log(res.test("sAdmin\nsAdmin")); //测试后面的字符串当中是否有1个数字
        console.log(res.exec("sAdmin\nsAdmin")) //测试后面的字符串当中是否有1个数字
    </script>
</body>
</html>

在JS当中，通常正则和表单进行结合，对表单内容进行前端校验。

onblur 光标移出，失去焦点

onfocus 光标移入，获取光标时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <!--校验用户名合法性,鼠标移出，用户名不可以为空，长度必须大于6位-->
        <input id="username" type="text" name="username">
        <span id="username_error" style="color: red"></span>
    </form>
    <script>
        var username = document.getElementById("username");
        var username_error = document.getElementById("username_error");
        username.onblur = function (ev) { //光标移出触发功能
            var value = username.value;
            if(value==""){
                username_error.innerText = "用户名不可以为空"
            }else if(value.length<6){
                username_error.innerText = "用户名长度必须大于6，亲"
            }
        };
        username.onfocus = function (ev) {
            username_error.innerText = ""
        }
    </script>
</body>
</html>

onsubmit 在表单触发提交的时候执行，如果对应函数返回false，不进行提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form onsubmit="return valid()">
        <!--校验用户名合法性,鼠标移出，用户名不可以为空，长度必须大于6位-->
        <input id="username" type="text" name="username">
        <span id="username_error" style="color: red"></span>
        <hr>
        <input type="submit" value="提交">
    </form>
    <script>
        function valid() {
            var username = document.getElementById("username");
            value = username.value;
            if(value==""){
                return false
            }else if(value.length<6){
                return false
            }
            return true
        }
    </script>
</body>
</html>

cxz_dong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript计时器数组正则

计时器计时器技术实现了不使用循环代码，轮训执行函数的功能，在JS当中，计时器分为两种：轮询计时：每间隔一个时间，执行一次<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <span id="span_id">看数字变化<
复制链接

扫一扫