首页 > 代码库 > 原生js实现的3个小特效（时钟、轮播图、选项卡）
原生js实现的3个小特效（时钟、轮播图、选项卡）
时钟：
<p id="timeTxt"></p> //将获取到的时间显示在timeTxt这里面
<button onclick="startTime()">关闭</button>
<!--时钟-->
function startTime(){ //创建startTime()函数
var today=new Date(); //定义一个对象today承载当前时间
var h=today.getHours(); //获取到时
var m=today.getMinutes(); //获取分
var s=today.getSeconds(); //获取秒
m=checkTime(m);
s=checkTime(s);
document.getElementById("timeTxt").innerHTML=h+":"+m+":"+s;
t=setTimeout(function (){
startTime();
},1000);//每隔1s重新获取当前时间
}
function checkTime(i){//判断当前的分钟数和秒数是否小于10
if(i<10){
i="0"+i; //小于10的时候在前面加上0
}
return i; //否则直接返回i
}
</script>
轮播图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js实现轮播图</title>
<style type="text/css">
div,ul,body{margin:0;padding:0;}
ul,li{list-style:none;list-style-type:none;}
#box{
position:relative;
font-size:12px;
font-family:"Arial";
width:482px;
height:322px;
border:8px solid #FF9900;
border-radius:10px;
margin:20px auto;
}
.imglist{
width:480px;
height:320px;
border:1px solid #000;
position:relative;
overflow:hidden;
}
.imglist li{
width:480px;
height:320px;
position:absolute;
left:0;
top:0;
opacity:0;
transition:opacity 0.8s linear;
cursor:pointer;
}
.imglist li.current{opacity:1;}
.imglist li img{
display:block;
width:480px;
height:320px;
}
.countlist{
position:absolute;
right:10px;
bottom:5px;
clear:both;
}
.countlist li{
float:left;
margin:0 5px;
width:20px;
height:20px;
line-height:20px;
text-align:center;
background:palevioletred;
border-radius:100%;
border-radius:10px;
opacity:0.8;
cursor:pointer;
}
.countlist li.active,.countlist li:hover{background:brown;color:#fff;}
</style>
</head>
<body>
<div id="box">
<ul class="imglist">
<li class="current"><img src="http://www.mamicode.com/img/4.jpg" /></li>
<li><img src="http://www.mamicode.com/img/6.jpg" /></li>
<li><img src="http://www.mamicode.com/img/7.jpg" /></li>
<li><img src="http://www.mamicode.com/img/4.jpg" /></li>
<li><img src="http://www.mamicode.com/img/8.jpg" /></li>
</ul>
<ul class="countlist">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var uls=box.getElementsByTagName("ul");
var imglist=uls[0].getElementsByTagName("li");
var btnlist=uls[1].getElementsByTagName("li");
var i=index=0;
var play=null;
//console.log(box,uls,imglist,btnlist);
function show(a){
for(i=0;i<imglist.length;i++){
imglist[i].style.opacity=0;
imglist[a].style.opacity=1;
}
for(i=0;i<btnlist.length;i++){
btnlist[i].className="";
btnlist[a].className="active";
}
}
for(i=0;i<btnlist.length;i++){
btnlist[i].index=i;
btnlist[i].onmouseover=function (){
show(this.index);
clearInterval(play);
}
}
function autoplay(){
play=setInterval(function (){
index++;
index>=imglist.length&&(index=0); //如果index>=imgList.length，则index=0；
// "与 Java 中的逻辑 AND 运算相似，ECMAScript 中的逻辑 AND 运算也是简便运算，
// 即如果第一个运算数决定了结果，就不再计算第二个运算数。对于逻辑 AND 运算来说，
// 如果第一个运算数是 false，那么无论第二个运算数的值是什么，结果都不可能等于 true。"
show(index);
},3000);
}
autoplay();
box.onmouseover=function (){
clearInterval(play);
};
box.onmouseout=function (){
autoplay();
}
</script>
</body>
</html>
选项卡：（样式比较丑，我也比较懒得改了）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tab选项卡</title>
<script type="text/javascript">
window.onload=function (){
var c=0;
var tablist=document.getElementById("tablist");
var a1=tablist.getElementsByTagName("a");
var list=document.getElementById("list");
var listUl=list.getElementsByTagName("ul");
for(var j=0;j<a1.length;j++){
a1[j].m=j;
a1[j].onclick=function (){
c=j;
for(var k=0;k<a1.length;k++){
a1[k].className="";
listUl[k].style.display="none";
}
this.className="active";
listUl[this.m].style.display="block";
}
}
}
</script>
<style type="text/css">
a{text-decoration:none;font-size:14px;}
.active{background:red;}
</style>
</head>
<body>
<div id="tablist">
<a href="http://www.mamicode.com/#" class="active">111111</a>
<a href="http://www.mamicode.com/#">222222</a>
<a href="http://www.mamicode.com/#">333333</a>
</div>
<div id="list">
<ul>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
</ul>
<ul style="display:none;">
<li>222222222</li>
<li>222222222</li>
<li>222222222</li>
<li>222222222</li>
<li>222222222</li>
</ul>
<ul style="display:none;">
<li>333333333</li>
<li>333333333</li>
<li>333333333</li>
<li>333333333</li>
<li>333333333</li>
</ul>
</div>
</body>
</html>
原生js实现的3个小特效（时钟、轮播图、选项卡）