文档对象模型DOM知识点总结

视频教程:JavaScript从入门到精通
JavaScript笔记:JavaScript从入门到精通

案例1 数码时钟

  • 定时器的应用 setInterval()

  • 数字图片的路径表示 aImg[i].src = "images/clock/" + currentTime[i] + ".png";

  • 系统时间的获取 var date = new Date();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数码时钟</title>

    <script>
        // 函数toDouble将时分秒转换成2位的表示形式
        function toDouble(n){
    
    
            if (n<10) return '0'+n; // 类型转换成字符串(数字+"")
            else return ''+n;
        }

        window.onload = function () {
    
    
            var time = document.getElementById('time');
            var aImg = time.getElementsByTagName('img'); // 获取时钟img元素,返回一个数组
            var year = document.getElementById('year');
            var aDiv = year.getElementsByTagName('div');

            function tick() {
    
    
                var date = new Date(); // 创建时间对象,获取系统时间
                var currentTime = toDouble(date.getHours()) + toDouble(date.getMinutes()) + toDouble(date.getSeconds());  // 把时分秒拼接成6位的字符串,如“123456”

                // 年月日
                aDiv[0].innerHTML = "<span>" + date.getFullYear() + "</span>";
                aDiv[1].innerHTML = "<span>" + (date.getMonth()+1) + "</span>";
                aDiv[2].innerHTML = "<span>" + date.getDate() + "</span>"; // date.getDay()返回星期(0-6数字),date.getDate()返回每个月的几号

                for (var i = 0; i<aImg.length; i++){
    
    
                    // charAt()获取指定位置上的字符串
                    aImg[i].src = "images/clock/" + currentTime.charAt(i) + ".png";  // 修改每张图片的src路径
                }
            }

            setInterval(tick, 1000);  // 设置定时器,每一秒执行一次
            tick();
        }
    </script>
</head>

<body style="color:black; width: 970px; ">
<div id="year" style="font-size: 150px;">
    <div style="float: left"></div>
    <img src="images/clock/nian.png" style="float: left">
    <div style="float: left"></div>
    <img src="images/clock/yue.png" style="float: left">
    <div style="float: left"></div>
    <img src="images/clock/ri.png" style="float: left">
</div>
<div id="time" style="clear: left; font-size: 150px;">
    <img src="images/clock/0.png">
    <img src="images/clock/0.png">
    :
    <img src="images/clock/0.png">
    <img src="images/clock/0.png">
    :
    <img src="images/clock/0.png">
    <img src="images/clock/0.png">
</div>
</body>
</html>

案例2 轮播图

  • 获取ul长度(div-ul-li的布局)
  • 设置ul.style.left使其滚动
  • 图片拼接
  • 点击左右按钮图片随之滚动

猜你喜欢

转载自blog.csdn.net/weixin_43973415/article/details/108463772