代码如何实现已阅读未阅读转换js

JavaScript08

代码如何实现已阅读未阅读转换js,第1张

把源码贴出来看看,检查文件格式是不是html

1、首先JS是一种弱语言,但是同类型可以自己相加减例如“a”+"b"可以自动组成ab;1+2自动变成3

2:不同类型的字符我们先转换例如“1”+2;parsInt("1")+2可以实现加法33:利用eval表达式进行实现。

2、JavaScript实现包括以下三部分:

ECMAScript:核心

文档对象模型(DOM):提供与网页内容交互的方法和接口。

浏览器对象模型(BOM):提供与浏览器交互的方法和接口。

首先要将自己要转换的HTML代码准备好。

然后进入

站长工具网

。百度搜索能找到,点击进入,选择“HTML/JS互转”

然后粘贴进去,得到相应的JS代码。

如果现在是直接放到网页中,直接将JS代码贴进去就行了。如果不是直接贴到记事本中。然后保存为JS文件。

然后我们得到JS文件,然后就可以直接上传了。

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)

})()