js倒计时

亦凉 2022-01-30 02:19 247阅读 0赞

## 倒计时 ##

* {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
    
            .box {
                width: 400px;
                height: 400px;
                background-color: #eeeeee;
                margin: 50px auto;
                text-align: center;
                overflow: hidden;
            }
    
            h1 {
                font-size: 30px;
                color: black;
                margin: 20px 0 30px;
            }
    
            .inputBox input {
                width: 70px;
                height: 20px;
                line-height: 20px;
    
            }
    
            .btn {
                width: 100px;
                height: 100px;
                background-color: red;
                color: black;
                border-radius: 50%;
                margin: 25px auto;
                font-size: 40px;
                line-height: 100px;
                cursor: pointer;
            }
    
            .targetDate {
                margin-bottom: 30px;
            }
    
            .targetDate span {
                font-size: 22px;
                color: #999999;
            }
    
            .reverseTime {
                font-size: 30px;
                color: #999999;
                display: none;
            }

<div class="box">
            <h1>倒计时</h1>
            <div class="inputBox">
                请输入 : 
                <input type="text">年 
                <input type="text">月 
                <input type="text">日
            </div>
            <div class="btn">开始</div>
            <p class="targetDate">现在距离-<span></span>-还剩:</p>
            <p class="reverseTime"></p>
        </div>

var year = document.getElementsByTagName('input')[0];
        var month = document.getElementsByTagName('input')[1];
        var day = document.getElementsByTagName('input')[2];
        var btn = document.getElementsByClassName('btn')[0];
        var span = document.getElementsByClassName('targetDate')[0].getElementsByTagName('span')[0];
        var p = document.getElementsByClassName('reverseTime')[0];
        var timer;
        btn.onclick = function () {
            var y = year.value;
            var m = month.value - 1;
            var d = day.value;
            console.log(isNaN(y))
            console.log(isNaN(d))
            console.log(isNaN(m))
    
            if(isNaN(y) || isNaN(d) || isNaN(m)){
                alert('请输入数字');
                return;
            }
            
            
            
            p.style.display = 'block';
            span.innerHTML = y + '年' + (m + 1) + '月' + d + '日';
            clock();
            clearInterval(timer)
            timer = setInterval(clock, 1000);
            function clock() {
            	//new Date(y, m, d); m的值最大是11
                var targetTime = new Date(y, m, d);
                var nowTime = new Date();
                var time = (targetTime - nowTime) / 1000;
                var t = parseInt(time / 86400);
                var hr = parseInt(time % 86400 / 3600);
                var min = parseInt(time % 3600 / 60);
                var sec = parseInt(time % 60);
                var str = t + '天' + hr + '小时' + min + '分' + sec + '秒';
                p.innerHTML = str;
            }
            //typeof parseInt(d) == Number? num : alert('请输入数字');
            //num = y,m,d == Number? num : alert('请输入数字');
        }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220130/7bdbc445e28a403e8923d541d5ef3415.png

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 天数倒计时时间倒计时

export function getOverTimeDown(endDateStr: string, outValue?: { value: string }, fn

àì夳堔傛蜴生んèń/ 2022年09月11日 12:10/ 0 赞/ 260 阅读

相关 js倒计时

//倒计时 function show_time() { //正数表达式 var re = /^\d+(?=\.{0,1}

我就是我/ 2022年08月05日 07:49/ 0 赞/ 205 阅读

相关 js倒计时效果

<ul> <li class="time hms"> <span></span

╰半橙微兮°/ 2022年05月23日 10:10/ 0 赞/ 199 阅读

相关 JS-实现秒表倒计时+缓存倒计时

实现秒表倒计时+缓存倒计时功能 <!DOCTYPE html> <html> <head> <meta ch

约定不等于承诺〃/ 2022年05月17日 12:38/ 0 赞/ 350 阅读

相关 JS倒计时实现

此为分秒单位倒计时，需要时分秒倒计时的可以自行修改，也可到我的资源中去下载。 <html> <head> <meta charset="UTF-8"> <ti

约定不等于承诺〃/ 2022年04月10日 05:22/ 0 赞/ 371 阅读

相关 js简单倒计时

不想每次用倒计时，都现写代码，比较烦，这里记一下，也顺便分享一些倒计时简单的逻辑。如果你有更简单方便的代码，可以分享给大家。 var method = {

忘是亡心i/ 2022年04月04日 20:27/ 0 赞/ 246 阅读

相关 js倒计时

倒计时 { padding: 0; margin: 0; box

亦凉/ 2022年01月30日 02:19/ 0 赞/ 248 阅读

相关 js倒计时

　　　　　　　　　　　　　　var startTime = Date.parse(new Date())/1000;//开始时间

太过爱你忘了你带给我的痛/ 2021年10月23日 10:55/ 0 赞/ 410 阅读

相关 js倒计时

![20190820151447888.png][] function tow(n) { return n >= 0 &&

- 日理万妓/ 2021年10月19日 09:52/ 0 赞/ 429 阅读

相关 JS 倒计时

经常遇到需要倒计时的地方，下面的JS可以简单实现倒计时，当然可以加上Css使得界面更加美观！ `<script type=` `"text/javascript"` `>`

约定不等于承诺〃/ 2021年09月29日 17:34/ 0 赞/ 522 阅读