织梦BUG

网站动态显示倒计时教程

建站帮助2020-03-23
织梦教程简介:网站使用JS实现动态显示倒计时时间教程!...

效果图

1、html部分

<span id="target"></span>

2、js部分

// 为简化。每月默认为30天;
 function getTimeString() {
    var start = new Date();
    var end = new Date(start.getFullYear() + 1, 0, 1);
    var elapse = Math.floor((end - start) / 1000);
    var seconds = elapse % 60 ;
    var minutes = Math.floor(elapse / 60) % 60;
    var hours = Math.floor(elapse / (60 * 60)) % 24;
    var days = Math.floor(elapse / (60 * 60 * 24)) % 30;
    var months = Math.floor(elapse / (60 * 60 * 24 * 30)) % 12;
    var years = Math.floor(elapse / (60 * 60 * 24 * 30 * 12));
    return start.getFullYear() + '年还剩' + years + '年' + months + '月' + days + '日'
        + hours + '小时' + minutes + '分' + seconds + '秒';
   }
 function domText(elem, text) {
    if (text == undefined) {

        if (elem.textContent) {
            return elem.textContent;
        } else if (elem.innerText) {
            return elem.innerText;
        }
    } else {
        if (elem.textContent) {
            elem.textContent = text;
        } else if (elem.innerText) {
            elem.innerText = text;
        } else {
            elem.innerHTML = text;
        }
    }
}
var target = document.getElementById('target');

setInterval(function () {
    domText(target, getTimeString());
}, 1000)

版权声明

本文为站长原创文章,未经站长允许不得转载。本文地址:https://www.dedecmsbug.com/help/91.html