1、实现图片轮播的效果,即:图片不停的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
user-select: none;
}
.banner{
position: relative;
width: 384px;
height: 470px;
margin: 50px auto;
}
.ban-image{
position: absolute;
width: 100%;
height: 100%;
}
.ban-image img{
opacity: 0;
position: absolute;
transition:1s;
}
.ban-image img.on{
opacity: 1;
}
.btn-left,.btn-right{
position: absolute;
top: 30%;
width: 45px;
margin-top: -30px;
background-color: rgba(0, 0,0, 0.5);
font-size: 18px;
text-align: center;
line-height: 60px;
color: #fff;
cursor: pointer;
}
.btn-left{
left:0px;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.btn-right{
right:0px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.tab{
position: absolute;
bottom: 180px;
left: 15%;
transform: translateX(-50%);
}
.tab li{
float: left;
list-style: none;
width: 10px;
height: 10px;
margin-left: 5px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.tab li.on{
background-color: #f70;
}
</style>
</head>
<body>
<div class="banner">
<div class="ban-image">
<a href="javascript:;"></a><img class="on" src = "img/1.png" alt="" width="384"></a>
<a href="javascript:;"></a><img src = "img/2.png" alt="" width="384"></a>
<a href="javascript:;"></a><img src = "img/3.png" alt="" width="384"></a>
<a href="javascript:;"></a><img src = "img/4.png" alt="" width="384"></a>
<a href="javascript:;"></a><img src = "img/5.png" alt="" width="384"></a>
<div class="btn">
<div class="btn-left"><</div>
<div class="btn-right">></div>
</div>
<div class="tab">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
var a=10;
var oBtnRight = document.querySelector('.btn-right');
var oBtnLeft = document.querySelector('.btn-left');
var aImages = document.querySelectorAll('.ban-image img');
var aTabs = document.querySelectorAll('.tab li');
var index = 0;
auto();
function auto(){
setInterval(function(){
aImages[index].className = '';
aTabs[index].style.backgroundColor = '#ccc';
index ++;
index %=5;
aImages[index].className = 'on';
aTabs[index].style.backgroundColor = '#f70';
},3000);
}
oBtnRight.onclick = function(){
aImages[index].className = '';
aTabs[index].style.backgroundColor = '#ccc';
index ++;
index %=5;
aImages[index].className = 'on';
aTabs[index].style.backgroundColor = '#f70';
console.log('我点击了',aImages[index]);
console.log('我点击了',aTabs[index]);
}
oBtnLeft.onclick = function(){
aImages[index].className = '';
aTabs[index].style.backgroundColor = '#ccc';
index --;
if(index < 0){
index =4;
}
aImages[index].className = 'on';
aTabs[index].style.backgroundColor = '#f70';
console.log('我点击了',aImages[index]);
console.log('我点击了',aTabs[index]);
}
for (var i =0;i<aTabs.length;i++){
aTabs[i].index =i;
aTabs[i].onclick = function(){
var This = this.index;
change (function(){
console.log(this,i);
index =This;
})
}
}
function change(callback){
aImages[index].className = '';
aTabs[index].className = '';
index++;
callback();
aImages[index].className = 'on';
aTabs[index].className = 'on';
lastIndex = index;
}
</script>
</body>
</html>
2、本地同步显示时间(即,在页面上显示实际的时间)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取当前时间</title>
<h2 class="page-header">当前时间:</h2><div id="time"> </div>
</head>
<body>
<script>
window.onload=function(){
//定时器每秒调用一次fnDate()
setInterval(function(){
fnDate();
},
1000);
}
//js 获取当前时间
function fnDate(){
var oDiv=document.getElementById("time");
var date=new Date();
var year=date.getFullYear();//当前年份
var month=date.getMonth();//当前月份
var data=date.getDate();//天
var hours=date.getHours();//小时
var minute=date.getMinutes();//分
var second=date.getSeconds();//秒
var time=year+"-"+fnW((month+1))+"-"+fnW(data)+" "+fnW(hours)+":"+fnW(minute)+":"+fnW(second);
oDiv.innerHTML=time;
}
//补位 当某个字段不是两位数时补0
function fnW(str){
var num;
str>10?num=str:num="0"+str;
return num;
}
</script>
</body>
</html>