function tree(data){
var str = "<ul class=l_tree>"
for(var i=0i<data.lengthi++){
str+='<li class="l_tree_branch" ><span></span>'+data[i].name
if(data[i].child){
str+=tree(data[i].child)
}
str+="</li>"
}
str += "</ul>"
return str
}
document.querySelector(".lists").innerHTML = tree(data)
var a = document.querySelectorAll(".lists >ul >li")
for(var i=0i<a.lengthi++){
a[i].onclick = function(e){
e.stopPropagation()
console.log(e.target.innerText)
var thatcss = e.target.querySelector("ul").style.visibility
if(thatcss == "hidden"){
e.target.querySelector("ul").style.display = "none"
e.target.querySelector("span").style.background = url(右箭头.png)
}else{
e.target.querySelector("ul").style.display = "block"
e.target.querySelector("span").style.background = url(下箭头.png)
}
}
}
}
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)
})()
