Question

将以下jq代码转换为原生js

$('.countdown').downCount({ date: '01/01/2019 00:00:00', offset: +10 }, function () { alert('倒计时结束!'); });

Answer 1

jquery.downCount.js是依赖于jQuery的插件（效果：倒计时），所以我们需要查看该插件的源码才能将其变成源生代码。

html代码：

<div class="p1">
    <span class="days"></span><span class="days_ref"></span>
    <span class="hours"></span><span class="hours_ref"></span>
    <span class="minutes"></span><span class="minutes_ref"></span>
    <span class="seconds"></span><span class="seconds_ref"></span>
  </div>

上面span中的class类是用于显示需要的类，在插件中days、hours、minutes、seconds分别用于显示天数、小时、分钟、秒，days_ref、hours_ref、minutes_ref、seconds_ref分别用于显示单位days或day，hours或hour、minutes或minute、seconds或second。这些类都没有定义相应的样式，需要自己自定义样式。

js代码，只是简易的提了出来，如果需要更灵活的配置，自己再做进一步封装：

(function () {
    var container = document.querySelector(".p1");
    var mydate = '1/27/2019 00:00:00', 
        myoffset = 10,
        callback = function () {
          alert("执行完毕");
        };

    /**
     * Change client's local date to match offset timezone
     * @return {Object} Fixed Date object.
     */
    var currentDate = function () {
        // get client's current date
        var date = new Date();

        // turn date to utc
        var utc = date.getTime() + (date.getTimezoneOffset() * 60000);

        // set new Date object
        var new_date = new Date(utc + (3600000*myoffset));

        return new_date;
    };

    /**
     * Main downCount function that calculates everything
     */
    function countdown () {
        var target_date = new Date(mydate), // set target date
            current_date = currentDate(); // get fixed current date

        // difference of dates
        var difference = target_date - current_date;

        // if difference is negative than it's pass the target date
        if (difference < 0) {
            // stop timer
            clearInterval(interval);

            if (callback && typeof callback === 'function') {
              callback();
            }

            return;
        }

        // basic math variables
        var _second = 1000,
            _minute = _second * 60,
            _hour = _minute * 60,
            _day = _hour * 24;

        // calculate dates
        var days = Math.floor(difference / _day),
            hours = Math.floor((difference % _day) / _hour),
            minutes = Math.floor((difference % _hour) / _minute),
            seconds = Math.floor((difference % _minute) / _second),

            // fix dates so that it will show two digets
            days = (String(days).length >= 2) ? days : '0' + days,
            hours = (String(hours).length >= 2) ? hours : '0' + hours,
            minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes,
            seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

        // based on the date change the refrence wording
        var ref_days = (days === 1) ? 'day' : 'days',
            ref_hours = (hours === 1) ? 'hour' : 'hours',
            ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
            ref_seconds = (seconds === 1) ? 'second' : 'seconds';

        // set to DOM
        document.querySelector('.days').innerHTML = days;
        document.querySelector('.hours').innerHTML = hours;
        document.querySelector('.minutes').innerHTML = minutes;
        document.querySelector('.seconds').innerHTML = seconds;

        document.querySelector('.days_ref').innerHTML = ref_days;
        document.querySelector('.hours_ref').innerHTML = ref_hours;
        document.querySelector('.minutes_ref').innerHTML = ref_minutes;
        document.querySelector('.seconds_ref').innerHTML = ref_seconds;
    };
    // start
    var interval = setInterval(countdown, 1000);
})();

Answer 2

downCount 是 jQuery 的插件，必须依赖于 jQuery。
你说 “转为原生 js”， 意思是将 downCount 这个插件用原生 js 实现吗？

Answer 3

window.onload = function() { document.body.innerHTML += '<div id="toTop"><i></i></div>'; var toTop = document.getElementById('toTop'); toTop.onclick = function() { interval = setInterval(function(){ if (document.documentElement.scrollTop <= 0) clearInterval(interval); document.documentElement.scrollTop -= document.body.scrollHeight/20; }, 20); } var backToTopFun = function() { var st = document.documentElement.scrollTop, winh = window.innerHeight; (st > 500) ? toTop.style.display = 'block' : toTop.style.display = 'none'; }; window.onscroll = function() { backToTopFun (); } }

Answer 4

你直接去看jquery源码不就知道了，jquery就是用js写的啊