请问该怎么将以下jq代码转换为原生js？

Question

$('.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 (); } }