纯前端实现—“王者荣耀开局十秒倒计时效果”

Posted 孤寒者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯前端实现—“王者荣耀开局十秒倒计时效果”相关的知识,希望对你有一定的参考价值。

实现效果:

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p
            text-align: center;
            font-size: 30px;
            height: 50px;
            line-height: 50px;
        
        .sp2
            color: red;
            font-size: 35px;
        
        .sp4
            color: #ff25ec;
        
    </style>
</head>
<body>
<!--第一行-->
<p>
    <span class="sp1"></span>
    <span class="sp2"></span>
    <span class="sp1"></span>
</p>
<!--第二行-->
<p>
    <span class="sp3"></span>
    <span class="sp4"></span>
</p>

<script>
    //获取元素
    var sp11 = document.getElementsByClassName("sp1");
    var sp22 = document.getElementsByClassName("sp2");
    var p1 = document.getElementsByTagName("p")[0];

    var sp33 = document.getElementsByClassName("sp3")[0];
    var sp44 = document.getElementsByClassName("sp4")[0];

    //第一行倒计时设置
    var time = 10;
    function time1() 
        if(time>0)
            sp11[0].innerText = "敌军还有";
            sp22[0].innerText = time;
            sp11[1].innerText = "秒到达战场!";
        else
            p1.innerText = "全军出击";
            clearInterval(a);
            clearInterval(b);
        
        time--;
    
    time1();                 //自调用的原因:如果不自调用,因为定时器的使用,界面会在1s后才出现!
    var a = setInterval("time1()",1000);

    // 第二行的时间设置
    function time2() 
        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth();
        var date = today.getDate();
        var hours = today.getHours();
        var min = today.getMinutes();
        var sec = today.getSeconds();
        // 判断分钟和秒钟
        if(min<10)
            min = "0" + min;
        
        if(sec<10)
            sec = "0" + sec;
        
        sp33.innerText = "现在是北京时间:" + year + "年" + month + "月" + date;
        sp44.innerText = hours + ":" + min + ":" + sec;
    
    time2();
    var b = setInterval("time2()",1000);


</script>

</body>
</html>

👇🏻可通过点击下面——>关注本人运营 公众号👇🏻

【可以公众号里私聊并标明来自CSDN,会拉你进入技术交流群(群内涉及各个领域大佬级人物,任何问题都可讨论~)--->互相学习&&共同进步(非诚勿扰)】

以上是关于纯前端实现—“王者荣耀开局十秒倒计时效果”的主要内容,如果未能解决你的问题,请参考以下文章

猜数字游戏——纯前端实现(纯小白也能看懂&CV直接拿走直接玩)

抽奖小游戏——纯前端实现(纯小白也能看懂&CV直接拿走直接玩)

Web开发纯前端实现科技企业官网首页

前端纯html+css+javascript实现楼层跳跃式的页面布局

纯前端js+echarts+xlsx.js 实现数据可视化

通过ECMA6的模块化,纯前端实现类似jsp:include的功能