心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

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

发布时间：2022-06-30 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了纯前端实现—“王者荣耀开局十秒倒计时效果”，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

实现效果：

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

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

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

源码：

<!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，会拉你进入技术交流群（群内涉及各个领域大佬级人物，任何问题都可讨论~）--->互相学习&&共同进步（非诚勿扰）】

脚本宝典总结

以上是脚本宝典为你收集整理的纯前端实现—“王者荣耀开局十秒倒计时效果”全部内容，希望文章能够帮你解决纯前端实现—“王者荣耀开局十秒倒计时效果”所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程