js初识第七节

2019-08-19  本文已影响0人  An的杂货铺

实现一个数码时钟的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="img/0.png">
    <img src="img/0.png">时
    <img src="img/0.png">
    <img src="img/0.png">分
    <img src="img/0.png">
    <img src="img/0.png">秒
</body>
<script type="text/javascript">
    function getTime(){
        var d = new Date();
        var h = d.getHours();
        //console.log(h)
        var m = d.getMinutes();
        //console.log(m);
        var s = d.getSeconds();
        //console.log(s);
        var arr = [parseInt(h/10),parseInt(h%10),parseInt(m/10),parseInt(m%10),parseInt(s/10),parseInt(s%10)];
        var oimg = document.querySelectorAll('img');
        for(var i = 0;i<oimg.length;i++){
            oimg[i].src = 'img/'+arr[i]+'.png';
        }
    }
    getTime();
    setInterval(getTime,1000)

    //以上是一个数码时钟的实例

    //自定义设置时间
    var date1 = new Date();
    date1.setDate(date1.getDate()+10);//在当前日期基础上加10
    console.log(date1);
</script>
</html>

定时器实现 一个特别简单的图片轮播

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<img src="img/6.jpg" alt="">

<script type="text/javascript">

    var oImg = document.getElementsByTagName("img")[0];

    var imgArr = ["6.jpg","7.jpg","8.jpg","9.jpg"];

    var index = 0;

    setInterval(function() {

    index++;

    if (index == imgArr.length) {

    index = 0;

    }

    oImg.src = "img/"+imgArr[index];

    }, 1000);

</script>

</body>

</html>
上一篇 下一篇

猜你喜欢

热点阅读