延时函数的应用【20秒进制时间表】

yang2639408005

已于 2023-11-09 18:33:01 修改

阅读量72

点赞数

文章标签： javascript 前端

于 2023-11-01 18:10:14 首次发布

本文链接：https://blog.csdn.net/yang2556925063/article/details/134167159

版权

使用延时函数做一个自定义进制的时钟，完整代码如下

20秒进制时钟

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .one {
            height:20px;
            width:20px;
            border:1px solid #cfc3c3;
            float:left;
        }
        .one0 {
            border-radius:50%;
            background-color:#cfc3c3;
        }
    </style>
</head>
<body >
    <div><font style="display:none">点击开始假秒表</font>
        <div class="one one0" οnclick="time()"></div>
        <div id="one" class="one">0</div>
        <div id="two" class="one">0</div>
        <div id="three" class="one">0</div>
    </div>
    <div>-----20秒进制时钟</div>

</body>
</html>
<script>
    
    function time() {
        var t = 0;
        var p = 0;
        var h = 0;
        var timer = setInterval(function () {
            if (t == 20) {
                t = 0;
                p++;
                document.getElementById('two').innerHTML=p;
            }
            if (p == 20) {
                p = 0;
                h++;
                document.getElementById('two').innerHTML = p;
                document.getElementById('one').innerHTML = h;
            }
            document.getElementById('three').innerHTML = t;
            t++;
            if (t > 20) {
                document.getElementById('three').innerHTML = t;
                t = 0;
                clearInterval(timer);
            }
        }, 1000);
    }
</script>

结束！
完善时钟（添加随机颜色读秒点）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
		.divleft{
			//border:1px solid red;
			height:50px;
			width:50px;
			float:left;
			border-radius:50%;
		}
        .one {
            height:20px;
            width:20px;
            //border:1px solid #cfc3c3;
            float:left;
        }
        .one0 {
            border-radius:50%;
            background-color:#cfc3c3;
        }
		.tocenter{
		height:15px;
		width:15px;
		margin:auto;
		position:relative;
		top:50%;
		margin-top:-7.5px;
		}
		.father{
		//border:1px solid #cfc3c3;
		width:252px;
		height:20px;
		margin:auto;
		position:relative;
		top:50%;
		margin-top:-10px;
		}
		.sons{
		//border:1px solid #cfc3c3;
		width:8px;
		height:8px;
		float:left;
		margin-top:5px;
		border-radius:50%;
		}
		.sonsx{
		//border:1px solid #cfc3c3;
		width:8px;
		height:8px;
		float:right;
		margin-top:5px;
		border-radius:50%;
		}
    </style>
</head>
<body style="background-color:black;">
    <div><font style="display:none">点击开始</font>
        <div id="kaishi" class="one one0" onclick="time()"></div>
		 <div  class="one">--</div>
    </div>
    <div>-----<font id="ts">20秒进制计时器</font>
		<div class="father" style="width:200px;float:right;margin-top:4px">
				<div id="sonx1" class="sonsx"></div>
				<div id="sonx2" class="sonsx"></div>
				<div id="sonx3" class="sonsx"></div>
				<div id="sonx4" class="sonsx"></div>
				<div id="sonx5" class="sonsx"></div>
				<div id="sonx6" class="sonsx"></div>
				<div id="sonx7" class="sonsx"></div>
				<div id="sonx8" class="sonsx"></div>
				<div id="sonx9" class="sonsx"></div>
				<div id="sonx10" class="sonsx"></div>
				<div id="sonx11" class="sonsx"></div>
				<div id="sonx12" class="sonsx"></div>
				<div id="sonx13" class="sonsx"></div>
				<div id="sonx14" class="sonsx"></div>
				<div id="sonx15" class="sonsx"></div>
				<div id="sonx16" class="sonsx"></div>
				<div id="sonx17" class="sonsx"></div>
				<div id="sonx18" class="sonsx"></div>
				<div id="sonx19" class="sonsx"></div>
				<div id="sonx20" class="sonsx"></div>
			</div>
	</div>

	<div class="divleft">
        <div id="one" class="tocenter"></div>
    </div>
	<div class="divleft">
        <div id="two"class="tocenter"></div>
    </div>
	<div class="divleft">
        <div id="three"class="tocenter"></div>
    </div>
	<div style="width:300px;height:50px;float:left;">
			<div class="father">
				<div id="son1" class="sons"></div>
				<div id="son2" class="sons"></div>
				<div id="son3" class="sons"></div>
				<div id="son4" class="sons"></div>
				<div id="son5" class="sons"></div>
				<div id="son6" class="sons"></div>
				<div id="son7" class="sons"></div>
				<div id="son8" class="sons"></div>
				<div id="son9" class="sons"></div>
				<div id="son10" class="sons"></div>
				<div id="son11" class="sons"></div>
				<div id="son12" class="sons"></div>
				<div id="son13" class="sons"></div>
				<div id="son14" class="sons"></div>
				<div id="son15" class="sons"></div>
				<div id="son16" class="sons"></div>
				<div id="son17" class="sons"></div>
				<div id="son18" class="sons"></div>
				<div id="son19" class="sons"></div>
				<div id="son20" class="sons"></div>
			</div>
	</div>

</body>
</html>
<script>
    function time(){
		time1();
		time2();
	}
    function time1() {
        var t = 0;
        var p = 0;
        var h = 0;
        var timer = setInterval(function () {
            if (t == 21) {
                t = 0;
                p++;
				document.getElementById('two').style.color = randomHexColor();
                document.getElementById('two').innerHTML=p;
            }
            if (p == 21) {
                p = 0;
                h++;
                document.getElementById('two').innerHTML = p;
				document.getElementById('one').style.color = randomHexColor();
                document.getElementById('one').innerHTML = h;
            }
			var scolor = randomHexColor()
			document.getElementById('three').style.color = scolor;
			time2();
			var stt = randomHexColor();
			document.getElementById('ts').style.color = stt;
			document.getElementById('kaishi').style.backgroundColor = stt;
            document.getElementById('three').innerHTML = t;
            t++;
            if (t > 21) {
                document.getElementById('three').innerHTML = t;
                t = 0;
                clearInterval(timer);
            }
			sonscolor(t-1,scolor);
        }, 1000);
    }
	function time2() {
			 var t = 0;
        var p = 0;
        var h = 0;
        var timer = setInterval(function () {
            t++;
            if (t > 11) {
                t = 0;
                clearInterval(timer);
            }
			sonscolorpro(t-1);
        }, 1000);
    }
	function randomHexColor() {
        var hex = Math.floor(Math.random() * 16777216).toString(16);
        while (hex.length < 6) {
            hex = '0' + hex;
        }
        return '#' + hex; 
    }
	function sonscolor(t,scolor){
		if(t != 0)  document.getElementById('son'+t).style.backgroundColor = scolor;
		if(t==20){
			for(var i=1;i<21;i++){
				document.getElementById('son'+i).style.backgroundColor = "";
			}
		}
		}
	function sonscolorpro(t){
	if(t == -1) t=1;
		if(t != 0)  document.getElementById('sonx'+t).style.backgroundColor = randomHexColor();
		if(t==10){
			for(var i=1;i<10;i++){
				document.getElementById('sonx'+i).style.backgroundColor = "";
			}
		}
	}

</script>