码迷,mamicode.com
首页 > Web开发 > 详细

原生js仿梦幻时间查看活动(代码临时存储)

时间:2017-06-06 23:22:14      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:xib   alt   技术   nts   html   idt   tag   color   http   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<title>js基础</title>
</head>
<body>
<style>
span{
border: 1px solid red;
box-sizing: border-box;
width: 25%;

}
.active{
background: blue;
color: #fff;
}
</style>
<div id="app0">
<h2>今天的活动时间安排</h2>
<span>00:00-06:00</span>
<span>06:01-12:29</span>
<span>12:30-15:59</span>
<span>16:00-23:50</span>
</div>
<div id="app1">

</div>
<script>
var list=[‘PK‘,‘捉鬼‘,‘钓鱼‘,‘比武大会‘];
var app0=document.getElementById(‘app0‘);
var span=app0.getElementsByTagName(‘span‘);
var app1=document.getElementById(‘app1‘);
for (var num=0;num<span.length;num++){
span[num].index=num;
span[num].onclick=function () {
for(var i=0;i<span.length;i++){
span[i].className=‘‘
}
this.className=‘active‘;
app1.innerHTML=‘<h2>今天活动是‘+list[this.index]+‘</h2>‘
}
}
</script>
</body>
</html>

技术分享

原生js仿梦幻时间查看活动(代码临时存储)

标签:xib   alt   技术   nts   html   idt   tag   color   http   

原文地址:http://www.cnblogs.com/mhxy13867806343/p/6953955.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!