0321 JS

最新推荐文章于 2024-03-06 15:07:49 发布

shuren1991

最新推荐文章于 2024-03-06 15:07:49 发布

阅读量222

点赞数 1

分类专栏：学习文章标签： css javascript

本文链接：https://blog.csdn.net/shuren1991/article/details/64548334

版权

学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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>

shuren1991

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0321 JS

0321 JS寻找元素通过ID getElementById();通过标签 getElemntsByTagName();通过节点父级，子级，孩子节点集;变量局部变量：函数内部定义的变量，仅在函数内部有效；全局变量：函数外定义的变量，定变量后的代码都可以引用；Tab栏切换排他思想：先干掉所有人，最后对自己设置。让每一个li自带自己的脚标，
复制链接

扫一扫