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

Question

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

• 
  

Answer 1

jquery.downCount.js是依赖于jQuery的插件（效果：倒计时），所以我们需要查看该插件的源码才能将其变成源生代码。html代码：<div&nbsp;class="p1">&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="days"></span><span&nbsp;class="days_ref"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="hours"></span><span&nbsp;class="hours_ref"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="minutes"></span><span&nbsp;class="minutes_ref"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="seconds"></span><span&nbsp;class="seconds_ref"></span>&nbsp;&nbsp;</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&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;container&nbsp;=&nbsp;document.querySelector(".p1");&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;mydate&nbsp;=&nbsp;'1/27/2019&nbsp;00:00:00',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myoffset&nbsp;=&nbsp;10,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback&nbsp;=&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("执行完毕");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Change&nbsp;client's&nbsp;local&nbsp;date&nbsp;to&nbsp;match&nbsp;offset&nbsp;timezone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@return&nbsp;{Object}&nbsp;Fixed&nbsp;Date&nbsp;object.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;currentDate&nbsp;=&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;get&nbsp;client's&nbsp;current&nbsp;date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;date&nbsp;=&nbsp;new&nbsp;Date();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;turn&nbsp;date&nbsp;to&nbsp;utc&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;utc&nbsp;=&nbsp;date.getTime()&nbsp;+&nbsp;(date.getTimezoneOffset()&nbsp;*&nbsp;60000);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;set&nbsp;new&nbsp;Date&nbsp;object&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;new_date&nbsp;=&nbsp;new&nbsp;Date(utc&nbsp;+&nbsp;(3600000*myoffset));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new_date;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Main&nbsp;downCount&nbsp;function&nbsp;that&nbsp;calculates&nbsp;everything&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;countdown&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;target_date&nbsp;=&nbsp;new&nbsp;Date(mydate),&nbsp;//&nbsp;set&nbsp;target&nbsp;date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current_date&nbsp;=&nbsp;currentDate();&nbsp;//&nbsp;get&nbsp;fixed&nbsp;current&nbsp;date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;difference&nbsp;of&nbsp;dates&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;difference&nbsp;=&nbsp;target_date&nbsp;-&nbsp;current_date;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;if&nbsp;difference&nbsp;is&nbsp;negative&nbsp;than&nbsp;it's&nbsp;pass&nbsp;the&nbsp;target&nbsp;date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(difference&nbsp;<&nbsp;0)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;stop&nbsp;timer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(interval);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(callback&nbsp;&&&nbsp;typeof&nbsp;callback&nbsp;===&nbsp;'function')&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;basic&nbsp;math&nbsp;variables&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;_second&nbsp;=&nbsp;1000,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_minute&nbsp;=&nbsp;_second&nbsp;*&nbsp;60,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_hour&nbsp;=&nbsp;_minute&nbsp;*&nbsp;60,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_day&nbsp;=&nbsp;_hour&nbsp;*&nbsp;24;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;calculate&nbsp;dates&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;days&nbsp;=&nbsp;Math.floor(difference&nbsp;/&nbsp;_day),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hours&nbsp;=&nbsp;Math.floor((difference&nbsp;%&nbsp;_day)&nbsp;/&nbsp;_hour),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minutes&nbsp;=&nbsp;Math.floor((difference&nbsp;%&nbsp;_hour)&nbsp;/&nbsp;_minute),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seconds&nbsp;=&nbsp;Math.floor((difference&nbsp;%&nbsp;_minute)&nbsp;/&nbsp;_second),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;fix&nbsp;dates&nbsp;so&nbsp;that&nbsp;it&nbsp;will&nbsp;show&nbsp;two&nbsp;digets&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;days&nbsp;=&nbsp;(String(days).length&nbsp;>=&nbsp;2)&nbsp;?&nbsp;days&nbsp;:&nbsp;'0'&nbsp;+&nbsp;days,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hours&nbsp;=&nbsp;(String(hours).length&nbsp;>=&nbsp;2)&nbsp;?&nbsp;hours&nbsp;:&nbsp;'0'&nbsp;+&nbsp;hours,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minutes&nbsp;=&nbsp;(String(minutes).length&nbsp;>=&nbsp;2)&nbsp;?&nbsp;minutes&nbsp;:&nbsp;'0'&nbsp;+&nbsp;minutes,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seconds&nbsp;=&nbsp;(String(seconds).length&nbsp;>=&nbsp;2)&nbsp;?&nbsp;seconds&nbsp;:&nbsp;'0'&nbsp;+&nbsp;seconds;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;based&nbsp;on&nbsp;the&nbsp;date&nbsp;change&nbsp;the&nbsp;refrence&nbsp;wording&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ref_days&nbsp;=&nbsp;(days&nbsp;===&nbsp;1)&nbsp;?&nbsp;'day'&nbsp;:&nbsp;'days',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ref_hours&nbsp;=&nbsp;(hours&nbsp;===&nbsp;1)&nbsp;?&nbsp;'hour'&nbsp;:&nbsp;'hours',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ref_minutes&nbsp;=&nbsp;(minutes&nbsp;===&nbsp;1)&nbsp;?&nbsp;'minute'&nbsp;:&nbsp;'minutes',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ref_seconds&nbsp;=&nbsp;(seconds&nbsp;===&nbsp;1)&nbsp;?&nbsp;'second'&nbsp;:&nbsp;'seconds';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;set&nbsp;to&nbsp;DOM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('.days').innerHTML&nbsp;=&nbsp;days;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('.hours').innerHTML&nbsp;=&nbsp;hours;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('.minutes').innerHTML&nbsp;=&nbsp;minutes;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('.seconds').innerHTML&nbsp;=&nbsp;seconds;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('.days_ref').innerHTML&nbsp;=&nbsp;ref_days;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('.hours_ref').innerHTML&nbsp;=&nbsp;ref_hours;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('.minutes_ref').innerHTML&nbsp;=&nbsp;ref_minutes;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('.seconds_ref').innerHTML&nbsp;=&nbsp;ref_seconds;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;start&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;interval&nbsp;=&nbsp;setInterval(countdown,&nbsp;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 (); } }