渡课学习第23天

学习内容：

1.通过三个案列讲解了JavaScript的DOM树，每个节点之间的关系，最关键的作业就是增删改查；
2.认识了setInterval函数和random函数，如何使用次函数；
3.加深了对定义数组、对象的理解；

显示时间代码`

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <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 = "";
        var now = new Date();
        var year = formatNum(now.getFullYear());
        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;
    }
    setInterval(dateFormat,1000);
    </script>
</body>
</html>

抽奖代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

    <style type="text/css">
        #content {
            width: 500px;
            height: 150px;
            background: black;
            margin: 100px auto;
            text-align: center;
            color: white;
            font-size: 45px;
            font-weight: 800;
            line-height: 150px;

        }

        #opr {
            width: 500px;
            height: 150px;
            text-align: center;
            margin: 100px auto;

        }
        a {
            color: black;
            font-size: 35px;
            font-weight: 500;
        }

    </style>
</head>
<body>
    <div id="content">


    </div>

    <div id="opr">
        <a href="javascript:begin();">开始</a>&nbsp;&nbsp;&nbsp;<a href="javascript:stop();">停止</a>

    </div>


    <script type="text/javascript">
        var stus = [
        {name:"jianghonglin",num:1,head:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=881295308,929488117&fm=27&gp=0.jpg"},
        {name:"shurong",num:2,head:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=26238633,2705587579&fm=27&gp=0.jpg"},
        {name:"liuxiaoyu",num:3,head:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3761248251,3161591279&fm=27&gp=0.jpg"},
        {name:"chentianjun",num:4,head:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2597747579,2041194040&fm=27&gp=0.jpg"},
        {name:"zhaoyinyan",num:5,head:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1710252047,3733580487&fm=27&gp=0.jpg"},
        {name:"shijialing",num:6,head:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=768675934,4184920487&fm=27&gp=0.jpg"},
        {name:"zhangxingpeng",num:7,head:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2939746231,1446778830&fm=27&gp=0.jpg"},
        ];
        var randomStu = function() {
            var stuNum = Math.ceil(Math.random()*7);
            var stu = stus[stuNum];
            document.getElementById("content").innerHTML = "<img src='"+stu.head+"' style='margin:25px,10px;' alt='' width='100px' height='100px'><span>"+stu.name+"</span><span>"+stu.num+"</span>";
        }
        var randomStuNum;
        var begin = function() {
            randomStuNum = setInterval(randomStu,100);
        }
        var stop = function() {

            clearInterval(randomStuNum);

        }


    </script>
</body>
</html>

学习内容：

猜你喜欢