0321 JS

来源：互联网发布：淘宝店铺出售网站编辑：程序博客网时间：2024/06/10 09:05

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>

1 0