javascript 简单时分秒倒计时

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .time_box {
            width: 200px;
            height: 50px;
            margin: 50px auto;
        }

        .time_box div {
            float: left;
            width: 30px;
            height: 30px;
            margin: 0 2px;
            background-color: #999;
            color: white;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="time_box">

    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>

</div>
<script>
    var h = document.querySelector(‘.hour‘);
    var m = document.querySelector(‘.minute‘);
    var s = document.querySelector(‘.second‘);
    var date1 = +new Date(‘2019-9-24 18:00:00‘); // 这里设置结束 时间

    function cutTime() {
        var date = +new Date();   // 这里设置开始 时间
        var times = (date1 - date) / 1000;
        var hour = parseInt(times / 60 / 60 % 24);  // 这里是小时数
        hour = hour < 10 ? ‘0‘ + hour : hour;
        h.innerHTML = hour;   // 将小时数 添加到小时盒子内
        var minute = parseInt(times / 60 % 60);  // 这里是分钟数
        minute = minute < 10 ? ‘0‘ + minute : minute;
        m.innerHTML = minute; // 将分钟数 添加到分钟盒子内
        var second = parseInt(times % 60);  // 这里是秒数
        second = second < 10 ? ‘0‘ + second : second;
        s.innerHTML = second; // 将秒数 添加到秒数盒子内
    }

    cutTime();

    setInterval(cutTime, 1000);
</script>

</body>
</html>

原文地址:https://www.cnblogs.com/nigori/p/10765215.html

时间: 2024-08-03 00:46:21

javascript 简单时分秒倒计时的相关文章

js简单时分秒倒计时

最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>简单时长倒计时</title> 5 <SCRIPT type="text/javascript"> 6 var maxtime = 60 * 60; //一个小时,按秒计算,自己调整! 7

毫秒数变成时分秒倒计时

js抽象代码: ;(function($){ /**时间间隔对象 * @author Karajan * @param gap 间隔毫秒 * @param {cT:当前时间(毫秒),eT:截止时间(毫秒),gap:间隔(毫秒),aEven:到点触发的事件function,iEven:初始化函数,初始化时被调用,lEven:倒计时结束触发方法} * */ function dateGap(gap){ var di=[],dCt=[1000*60*60*24,1000*60*60,1000*60,1

最简时分秒倒计时

代码:单页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&qu

使用CounterDownTimer实现时分秒倒计时

使用android提供的android.os包中的 counterDownTimer可以很方便的实现倒计时功能,具体如下: import android.os.CountDownTimer; public class Couterdown extends CountDownTimer { public Couterdown(long millisInFuture, long countDownInterval) { super(millisInFuture, countDownInterval)

关于时间的操作(JavaScript版)——页面显示格式:年月日 上午下午 时分秒 星期

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JavaScript基础 Date(日期字符串 不包括时分秒) 不指定时分秒的时候 系统默认是0:0:0

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

JavaScript基础 Date(日期字符串 包括时分秒)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

时间操作(JavaScript版)—页面显示格式:年月日 上午下午 时分秒 星期

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

2道acm简单题(2013):1.(时分秒)时间相减;2.主持人和N-1个人玩游戏,每个人说出自己认识的人数,判断其中是否有人说谎。

/*1.题目:输入一个数,代表要检测的例子的个数,每个例子中:输入两个时间(格式HH:MM : SS),前面时间减去后面时间,输出在时钟上显示的时间,格式一样,如果是以为数字的前面补零.*//**思路:1.将两个时间都转换秒,进行相减,得到的结果再转化为时分秒形式:*2.先进行秒的相减,如果不够减,向分借1,接着进行分的减,如果不够减,向时借1,最后得出相减后一个时分秒的结果.*///解1:#include<stdio.h>int main(){ int test;//代表要检测的例子的个数