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

Posted 2023-05-13

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

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);
)();

参考技术A downCount 是 jQuery 的插件，必须依赖于 jQuery。
你说 “转为原生 js”， 意思是将 downCount 这个插件用原生 js 实现吗？ 参考技术B 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 (); 参考技术C 你直接去看jquery源码不就知道了，jquery就是用js写的啊

js或者jq转换字符串问题

js或者jq有没有什么方法可以做 吧字符串转换成数字 如果转换不成功则返回传入的字符串

参考技术A js有专门的将字符串转换成数字的函数：parseInt()和parseFloat();
你也可以用正则表达式将字符串里的“数字”提出来，然后用Number()函数对其强制转换，否则用Number()会返回NaN。 参考技术B <html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="js/jquery/jquery.js"></script>
 <script type="text/javascript">
  function convertNum(obj)
   var convertObj = parseInt(obj);
   if(isNaN(convertObj))
    alert(obj);
   else
    alert(convertObj);
   
  
 </script>
</head>
<body>
 <input type="button" value="点击转换" onclick="convertNum(1)"/>
  <input type="button" value="点击转换" onclick="convertNum('1abcde')"/>
 <input type="button" value="点击转换" onclick="convertNum('dabcde')"/>
</body>
</html>

 alert改成return就行了

参考技术C 字符串是什么类型的字符串
数字类型的字符串是可以转化为整形，浮点型的用parseInt,parseFloat转换
英文字符串，可以根据每个字符对应ascii追问

调用的方法 返回的肯定是一个string 然后 在我当前使用的情况下 有可能返回的是数字 所以我要 一个方法 去转换成数字 如果不成功则 返回传入的字符串

参考技术D var result = Number(string) ? Number(string) : !string ? 0 : string;本回答被提问者采纳