渡课日记8.3

最新推荐文章于 2024-06-19 15:11:34 发布

desonly_forest

最新推荐文章于 2024-06-19 15:11:34 发布

阅读量147

点赞数

分类专栏：学习日记

本文链接：https://blog.csdn.net/desonly_forest/article/details/81395288

版权

学习日记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、学习内容

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

二、学习安排

1:30~3:00深入理解老师上课讲解的内容；
3:00~5:30将今日代码敲打了数遍；
7:00~8:00完成博客日记；

三、今日代码

图片轮播案例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        #content {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background: black;  
        }
        #pager {
            text-align: center;
            width: 400px;
            margin: 100px auto;
        }


    </style>
</head>
<body>
<div id="content">
    <img id="cimg" src="http://placehold.it/400x400/333333/00a2ff.png&text=1" alt="" width="400px" height="400px">
</div>
<div id="pager"></div>
<select id="sel" onchange="changeImg()">
<!--    <option value="0">第一张</option>
    <option value="1">第二张</option>
    <option value="2">第三张</option>
    <option value="3">第四张</option>
    <option value="4">第五张</option> -->
</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 changeImg = function() {
        var sel = document.getElementById("sel");
        document.getElementById("cimg").src = imgArray[sel.value];
        i = parseInt(sel.value) + 1;

    }

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


    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;



    var i = 0;
    var ci = function() {
        document.getElementById("cimg").src = imgArray[i];
        i++;
        if(i == imgArray.length) {
            i = 0;
            }
    }

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

显示此时时间案列：

<!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>

四、学习心得

今日内容有点多，理解起来有点难，通过代码的不断敲打，边打边理解，通过断点测试看函数代码走向加深了解一段代码。

desonly_forest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渡课日记8.3

一、学习内容通过三个案列讲解了JavaScript的DOM树，每个节点之间的关系，最关键的作业就是增删改查；认识了setInterval函数和random函数，如何使用次函数；加深了对定义数组、对象的理解；二、学习安排1:30~3:00深入理解老师上课讲解的内容； 3:00~5:30将今日代码敲打了数遍； 7:00~8:00完成博客日记；三、今日代码图片...
复制链接

扫一扫