渡课课堂总结（8.3）-CSDN博客

本文链接：https://blog.csdn.net/weixin_42623761/article/details/81394627

今日代码练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #content {
                width: 400px;
                height: 400px;
                background-color: grey;
                margin: 100px auto;
            }
            #pager {
                width: 400px;
                margin: 100px auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <img id="cimg" src="" alt="图片的描述问题" width="400px" height="400px">
        </div>
        <div id="pager">
        </div>
        <select id="sel" onchange="changeImg(this);">
        </select>
        <script type="text/javascript">

            // 图片数据源
            var imgArray = [
                "http://placehold.it/400x400/333333/00a2ff.png&text=1",
                "http://placehold.it/400x400/333333/00a2ff.png&text=2",
                "http://placehold.it/400x400/333333/00a2ff.png&text=3",
                "http://placehold.it/400x400/333333/00a2ff.png&text=4",
                "http://placehold.it/400x400/333333/00a2ff.png&text=5"];


                var i = 1; // 全局变量i,用于指定显示哪种图片

                var achangeImg = function(v) {
                    document.getElementById("cimg").src = imgArray[v];
                    i = v;
                }

                var changeImg = function(sel) {
                    document.getElementById("cimg").src = imgArray[sel.value];
                    i = sel.value;
                }

                // 初始化select标签中option的内容
                var selOptions = "";
                var as = "";
                for (var k = 0; k < imgArray.length; k++) {
                    selOptions += "<option value='"+k+"'>第"+(k+1)+"张</option>";
                    as += "<a href='javascript:achangeImg("+k+")'>"+(k+1)+"</a>&nbsp;";
                }
                document.getElementById("sel").innerHTML = selOptions;
                document.getElementById("pager").innerHTML = as;


                document.getElementById("cimg").src = imgArray[0];

                var ci = function() {
                    document.getElementById("cimg").src = imgArray[i]; // 显示图片
                    // 准备下一张图片
                    i++; // 1
                    // 如果i加完的结果超过了图片的长度，则初始化i=1
                    if (i == imgArray.length) {
                        i = 0;
                    }
                }
                setInterval(ci,1000);
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #content {
                width: 500px;
                height: 150px;
                background-color: black;
                color: white;
                text-align: center;
                margin: 100px auto;
                font-size: 28px;
                font-weight: 800;
                line-height: 150px;
            }
        </style>
    </head>
    <body>
        <div id="content">

        </div>
        <script type="text/javascript">

            var formatNum = function(num) {
                if (num < 10) return "0" + num;
                return num;
            }

            var dateFormat = function() {
                var result = "xxxx";
                var now = new Date();
                var year = formatNum(now.getFullYear()); // 2018
                var month = formatNum(now.getMonth() + 1);
                var date = formatNum(now.getDate());

                var hour = formatNum(now.getHours());
                var minute = formatNum(now.getMinutes());
                var second = formatNum(now.getSeconds());

                result = ""+year+"年"+month+"月"+date+"日"+hour+":"+minute+":"+second+" ";

                document.getElementById("content").innerHTML = result;
            }
            dateFormat();

            setInterval(dateFormat,1000);
        </script>
    </body>
</html>