随机点名网页-----秒表计时器

最新推荐文章于 2024-04-27 01:11:23 发布

繁星日月

最新推荐文章于 2024-04-27 01:11:23 发布

阅读量397

点赞数 5

文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_65810417/article/details/137967756

版权

1.随机点名网页

window.onload()方法：

该方法用于在网页加载完毕后立刻执行的操作，即当html加载完毕后，立刻执行某个方法等。

利用document对象来获取页面元素

document也是window对象的子对象

一个浏览器窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象就是window对象的子对象

innerText和innerHTML的区别：

innerText指的是从对象的起始位置到终点位置的全部内容，包括html标签

innerHTML值的是从起始位置到终点位置的内容，它会去掉html标签

常见的点击触发事件：

onclick----点击某个对象时触发

ondblclick---双击某个对象时触发

setInterval和clearInterval----用来重复调用函数和取消函数

源代码:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机点名</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
                background-color: rgb(123, 181, 232);
			}

			#index {
				width: 300px;
				height: 200px;
				border: none;
				margin: 200px auto;
				text-align: center;
			}

			#container {
				width: 100%;
				height: 80%;
				line-height: 160px;
				border-radius: 30px;
				background-color: rgb(31, 68, 120);
				box-shadow: 0 3px 3px 0 #c17373;
				text-align: center;
				color: #ccb2b2;
				margin-bottom: 10px;
			}

            /* 按钮样式 */
			#btn {
				height: 40px;
				width: 60px;
				line-height: 40px;
				border: none;
				outline: none;
				background-color: rgb(142, 142, 183);
				border-radius: 30px;
				text-align: center;
				box-shadow: 0 3px 3px 0 #dcdcdc;
			}
            #btn:hover{
                font-size: larger;
            }
		</style>
	</head>
	<body>
		<div id="index">
			<div id="container">？？？</div>
			<button id="btn">开始</button>
		</div>
	</body>
</html>
<script>
    window.onload = function() {

        var classMate = ["小明", "小王", "小李", "小张", "小徐", "小刚", "张三", "李四"];
        // 获取页面元素
        var btn = document.getElementById("btn");
        var container = document.getElementById("container");
        // 自定义变量
        var flag = false;
        var myinterval;

        // 点击触发事件
        btn.onclick = function() {

            // 切换点名状态
            flag = !flag;

            if (flag) {
                myinterval = setInterval(function() {
                    var num = Math.floor(Math.random() * classMate.length);
                    container.innerHTML = classMate[num]
                }, 50);
                btn.innerHTML = "暂停";
            } else {
                clearInterval(myinterval);
                btn.innerHTML = "点名";
            }
        }
    }
</script>

运行效果：

2.秒表计时器

自定义$函数，$(id)，利用选择器返回id对应的对象:

function $(id){
return document.getElementById(id)
}

showNum辅助函数

用来处理单位数字，如果传入的数字小于10，则会在数字前面加一个'0',否则就直接返回原数字

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表计时器</title>
    <style>
        #container{
            width: 800px;
            height: 600px;
            margin: 100px auto;
            background-color: antiquewhite;
            text-align: center;
        }
        #count{
            width: 500px;
            height: 600px;
            line-height: 500px;
            background-color: beige;
            font-size: 60px;
            margin: auto;
        }
        #container input{
            width: 200px;
            height: 50px;
            font-size: 25px;
            background: orange;
            margin-top: 20px;
        }
        #start:hover{
            font-size: larger;
        }
        #pause:hover{
            font-size: larger;
        }
        #restart:hover{
            font-size: larger;
        } 
    </style>
</head>
<body>
    <div id="container">
        <div id="count">
            <span id="H">00</span>
            <span id="M">00</span>
            <span id="S">00</span>
        </div>
        <input id="start" type="button" value="开始">
        <input id="pause" type="button" value="暂停">
        <input id="restart" type="button" value="重置">
    </div>
</body>
</html>
<script>
    function $(id){
        return document.getElementById(id)
    }
    window.onload=function(){
        // 开始计数
        var count=0
        var timer=null //timer变量记录定时器setInterval的返回值
        $("start").onclick=function(){
            timer=setInterval(function(){
                count++;
                console.log(count)
                // 需要改变页面上时分秒的值
                console.log($("S"))
                $("S").innerHTML=showNum(count%60)
                $("M").innerHTML=showNum(parseInt(count/60)%60)
                $("H").innerHTML=showNum(parseInt(count/60/60))
            },1000)
        }

        // 暂停计数
        $("pause").onclick=function(){
            //取消定时器
            clearInterval(timer)
        }

        // 停止计数，时间清零重置
        $("restart").onclick=function(){
            //取消定时器
            $("pause").onclick()
            count=0
            // 时间清零
            $("S").innerHTML="00"
            $("M").innerHTML="00"
            $("H").innerHTML="00"
        }

        //封装一个处理单位数字的函数
        function showNum(num){
            if (num<10){
                return '0'+num
            }
            return num
        }
    }
</script>

运行效果:

繁星日月

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
随机点名网页-----秒表计时器

一个浏览器窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象就是window对象的子对象。innerText指的是从对象的起始位置到终点位置的全部内容，包括html标签。setInterval和clearInterval----用来重复调用函数和取消函数。该方法用于在网页加载完毕后立刻执行的操作，即当html加载完毕后，立刻执行某个方法等。ondblclick---双击某个对象时触发。onclick----点击某个对象时触发。showNum辅助函数。
复制链接

扫一扫