展示效果：

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>倒计时</title>

    <style>

        a{

            /*去除下划线*/

            text-decoration: none;

            color: black;

            font-size: 20px;

        }

        span{

            color: skyblue;

            font-size: 25px;

        }

    </style>

</head>

<body>

    <div>

        <a href="#">现在是北京时间：</a>

        <span>2022</span>

        <a href="#">年</a>

        <span>5</span>

        <a href="#">月</a>

        <span>5</span>

        <a href="#">日</a>

        <span>19</span>

        <a href="#">:</a>

        <span>50</span>

        <a href="#">:</a>

        <span>54</span>

    </div>

    <div>

        <a href="#">敌军还有</a>

        <span>5</span>

        <a href="#">秒到达战场······</a>

    </div>

    <script>

        var box = document.getElementsByTagName("div");

        var spa = document.getElementsByTagName("span");

        // 日期

        setInterval(function () {

            var data = new Date();

            // 获取年

            var year = data.getFullYear();

            // 获取月

            var mouth = data.getMonth()+1;

            // 获取日

            var day = data.getDate();

            // 获取时

            var hour = data.getHours();

            // 获取分

            var mini = data.getMinutes();

            // 获取秒

            var sec = data.getSeconds();

            // 补齐两位数

            if (mini<10){

                mini = "0" + mini;

            }

            if (sec<10){

                sec = "0" + sec;

            }

            // 获取到的年赋值给第一个span标签

            spa[0].innerText = year;

            spa[1].innerText = mouth;

            spa[2].innerText = day;

            spa[3].innerText = hour;

            spa[4].innerText = mini;

            spa[5].innerText = sec;

        },1000)

        var timer = 6;

        setInterval(function () {

            if (timer<=0){

                box[1].innerText = "时间已到，全军出击！！！";

                box[1].style.color = "red";

                box[1].style.fontSize = "20px";

            }else {

                timer--;

                spa[6].innerText = timer;

            }

        },1000)

    </script>

</body>

</html>

JavaScript案例：倒计时的更多相关文章

  1. JavaScript案例开发之扑克游戏

    随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话 ...

  2. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  3. 用Javascript 实现倒计时

    用Javascript 实现倒计时<!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. 第二章 JavaScript案例（中）

    1. js事件 HTML代码 <!DOCTYPE html> <html lang="en" onUnload="ud()"> < ...

  5. javascript 时间倒计时

    新加入一个项目的集中开发,遇到一个需要倒计时的需求,经过测试,有以下几种方案,分享出来: 方案一: 页面Html: <span style="font-size:18px;" ...

  6. JavaScript案例一：Window弹窗案例

    注:火狐可运行,谷歌不可运行(安全级别高) <!DOCTYPE html> <html> <head> <title>JavaScript 弹窗案例&l ...

  7. javascript实现倒计时

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 面向对象原生JavaScript案例炫彩小球

    面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目 面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面 ...

  9. Ajax(javascript)案例

    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...

  10. Javascript实现倒计时和根据某时间开始计算时间

    JavaScript 代码 <script type="text/javascript"> var time_start = new Date('2018','7',' ...

随机推荐

  1. 【分析笔记】LVGL v8.2.0 使用 freetype 概率性无显示的问题

    使用目前最新的 Releases 版本 LVGL v8.2.0 ,移植好 freetype2 后测试,发现每次启动程序时会高概率出现屏幕显示全白色背景,无任何内容的问题. 打开日志开关,出现问题时会有 ...

  2. Fiegn 声明式接口调用

    五:Fiegn 声明式接口调用 什么是Fiegn Netfix,Fiegn 是一个提供模板式的Web Service客户端,使用Fiegn 可以简化Web Service 客户端的编写,开发者可以通过 ...

  3. 如何在Net6.0里配置多版本支持并支持注释说明的Swagger

    一.前言 现在已经进入了微服务的开发时代了,在这个时代,如果有人问你什么是微服务,你说不知道,就有点太丢人了,别人会有异样的眼光看你,俗话说:唾液淹死人.没办法,我们只能去学习新的东西.一提到微服务, ...

  4. [AHOI2002]黑白瓷砖

    \(\text{Solution}\) 根据 \(Polya\) 定理推算 记总砖数为 \(m = \frac{n(n+1)}2\) 考虑旋转,不动点数均为为 \(2^{\frac{m+2}3}\) ...

  5. AHOI，但是初中组，2017-2018

    你觉得我这种彩笔像是能去做省选题的样子吗?=w= 合肥人,做初中的屑安徽题,很正常吧.AH 也不知道为啥搞啥市赛啊区赛啊省赛啊就挺离谱的反正摆烂人也不想打┓( ´∀` )┏ 2018 T1 签到题 / ...

  6. Linux（CentOS）安装Redis保姆级教程

    Linux(CentOs)安装Redis教程 一,下载Redis(两种方式) 1,找到redis官网(https://redis.io/download) 如果想下载指定版本就去这个网址(https: ...

  7. Net6 Core Api(.net6)发布到IIS注意事项及显示HTTP 错误500.19解决方法

    Net6 Core Api发布到IIS不同于webapi,依赖框架不同,配置也移至项目内Program.cs 一.发布到指定文件夹,和IIS,不过注意IIS应用程序池选择的是 "无托管代码& ...

  8. 报错解决：DENIED Redis正在保护模式下运行

    DENIED Redis正在保护模式下运行,因为已启用保护模式,未指定绑定地址,也未向客户端请求身份验证密码.在此模式下,仅接受环回接口的连接.如果您想从外部计算机连接到Redis,您可以采用以下解决 ...

  9. 在stm32中使用printf

    记录使用printf的方法 1.配置GPIO GPIO_InitTypeDef GPIO_InitStruct; RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA ...

  10. loj2839

    除了 L 神 txdy 我还能说啥呢.(L 神把这题搬模拟赛了...) 即把每个 x 换成 ( 或 ),问是否能通过不多于一次区间反转(( 与 ) 交换)后合法. 考虑怎样的括号串是合法的. 假设左括 ...