0321 JS
寻找元素
- 通过ID
getElementById()
; - 通过标签
getElemntsByTagName()
; - 通过节点 父级,子级,孩子节点集;
变量
- 局部变量:函数内部定义的变量,仅在函数内部有效;
- 全局变量:函数外定义的变量,定变量后的代码都可以引用;
Tab栏切换
排他思想:先干掉所有人,最后对自己设置。
- 让每一个li自带自己的脚标,js实现:lis[i].index = i;
时钟:
直关键是控制元素旋转的样式transform=rotate(45deg)
,然后就是获得对应的时间,并将时间转换成角度。若需要小时和分钟的变化更细微,控制小时的角度就要加上分钟变化增加的角度(60分钟增加1小时,每小时30度,即1分钟增加0.5deg),而分钟要加上秒增加的影响(60秒1分钟,每分钟6度,即每秒增加0.1deg),代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clock</title>
<style>
.box{
width: 600px;
height: 600px;
margin:0 auto;
background: url(images/clock.jpg);
position: relative;
}
.box div{
width: 30px;
height: 600px;
position: absolute;
left:285px;
}
.hour{
background: url(images/hour.png);
}
.minute{
background: url(images/minute.png);
}
.second{
background: url(images/second.png);
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hour" id="hour"></div>
<div class="minute" id="minute"></div>
<div class="second" id="second"></div>
</div>
<script>
var boxs = document.getElementById('box');
var child = boxs.children;
function rot(){
var tody = new Date();
var h = tody.getHours();//获取小时
var m = tody.getMinutes();//获取分钟
var s = tody.getSeconds();//获取秒
//转换成角度:
var ah = h*30+m*0.5+"deg";
var mh = m*6+s*0.1+"deg";
var sh = s*6+"deg";
//控制对应指针旋转
child[0].style.transform="rotate("+ah+")";
child[1].style.transform="rotate("+mh+")";
child[2].style.transform="rotate("+sh+")";
t = setTimeout("rot()",500)
}
rot();
</script>
</body>
</html>