<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>倒计时</title>
</head>
<body>
<input type="text" placeholder="请输入时间">
<button>开始</button>
<h2></h2>
<script>
var h = document.getElementsByTagName('h2')[0];
//倒计时方法
function countDown(stoptimestr){
//获取当前时间
var nowTime = new Date();
//获取截止时间
var stopTime = new Date(stoptimestr);
console.log(stopTime.toLocaleString());
//获取毫秒数，并进行相减，求出时间差
var mistiming = stopTime.getTime() - nowTime.getTime();
//根据时间差 转换天数，时分秒
var days = Math.floor(mistiming / 1000 / 60 / 60 / 24);
var hours = Math.floor(mistiming /1000 /60 / 60 %24);
var minutes = Math.floor(mistiming /1000 /60 % 60);
var seconds = Math.floor(mistiming /1000 % 60);
days < 10 ? days = '0' + days : days;
hours < 10 ? hours = '0' + hours : hours;
minutes < 10 ? minutes = '0' + minutes : minutes;
seconds < 10 ? seconds = '0' + seconds : seconds;
var rels = mistiming > 0 ? `${days}天${hours}时${minutes}分${seconds}秒` : '请重新输入时间';
return rels;
}
// 启动倒计时
setInterval(function(){
h.innerHTML = countDown('2020-06-07 8:10:00');
},1000)
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<link rel="stylesheet" href="../sassdemo/轮播.css">
<link rel="stylesheet" href="../sassdemo/fonts1/iconfont.css">
</head>
<body>
<div class="box">
<ul id="uls">
<li>
<img src="../轮播图.01.jpg" alt="">
</li>
<li>
<img src="../轮播图.02.jpg" alt="">
</li>
<li>
<img src="../轮播图.03.jpg" alt="">
</li>
<li>
<img src="../轮播图.04.jpg" alt="">
</li>
<li>
<img src="../轮播图.05.jpg" alt="">
</li>
</ul>
<span id="left"><</span>
<span id="right">> </span>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
//封装id的写法
function $(names) {
return document.getElementById(names);
}
var left = $('left');
console.log(left)
var right = $('right')
var box = document.getElementsByClassName('box')[0];
// console.log(box)
var li_list = document.querySelectorAll('#uls li');//获取图片的li
// console.log(li_list)
var ol_list = document.querySelectorAll('ol li');
// console.log(ol_list)
var timer = null;//声明定时器
var count = 0;
function auto() {//执行自动轮播
count++;
if (count > li_list.length - 1) {
count = 0;
}
for (var i = 0; i < li_list.length; i++) {
li_list[i].style = 'display:none;';
ol_list[i].className = '';
}
li_list[count].style = 'display:block;'
ol_list[count].className = 'active';
}
timer = setInterval(auto, 800);//调用定时器
right.onclick = function () {
auto();
}
// 点击左侧，切换上一个
left.onclick = function () {
count--;
if (count < 0) {
count = li_list.length - 1;
}
console.log(count);
for (var i = 0; i < li_list.length; i++) {
li_list[i].style = 'display:none;';
ol_list[count].className = '';
}
li_list[count].style = 'display:block;';
ol_list[count].className = 'active';
}
box.onmouseover = function () {//鼠标划上去，停止轮播
clearInterval(timer);
}
box.onmouseout = function () {//鼠标划出，继续轮播
timer = setInterval(auto, 500);//调用定时器
}
//点击小按钮，切换图片
for(var j = 0; j< ol_list.length;j++){
ol_list[j].ind = j;//为每个小按钮添加下标
ol_list[j].onclick = function(){//进入点击事件
for (var i = 0; i < li_list.length; i++) {//干掉所有人
li_list[i].style = 'display:none;';
ol_list[i].className = '';
}
li_list[this.ind].style = 'display:block;';//留下我自己
ol_list[this.ind].className = 'active';
count = this.ind; // 把当前的角标值赋值给count
}
}
</script>
</body>
</html>