码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript-06-Dom操作

时间:2018-12-31 20:26:38      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:变量   col   nbsp   inter   none   切换图片   nts   script   ima   

1.上下切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下切换图片</title>
</head>
<body>
<img name="icon" src="image/icon_01.png">
<p></p>
<button>上一张</button>
<button>下一张</button>

<script>
    // 1.全局的变量
    var maxIndex = 9;
    var minIndex = 1;
    var currentIndex = minIndex;

    // 2.拿到要操作的标签
    var img = document.getElementsByName(icon)[0];
    var pre = document.getElementsByTagName(button)[0];
    var next = document.getElementsByTagName(button)[1];

    // 3.监听按钮的点击
    // 3.1 上一张
    pre.onclick = function () {
        if (currentIndex == minIndex){ // 边界处理
            currentIndex = maxIndex;
        }else{ // 正常情况
            currentIndex -=1;
        }

        // 改变src
        img.src = image/icon_0 + currentIndex + .png;
        console.log(img.src);
    };

    // 3.2 下一张
    next.onclick = function () {
        if (currentIndex == maxIndex) {
            currentIndex = minIndex;
        }else  {
            currentIndex +=1;
        }
        // 改变src
        img.src = image/icon_0 + currentIndex + .png;
        console.log(img.src);
    }
</script>
</body>
</html>

2.定时器操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <style>
        body{
            background-color: black;
            text-align: center;
            margin-top: 100px;
        }
        div{
            color: red;
            font-size: 150px;
        }
        img{
            display: none;
        }

        p{
            display: none;
            color: red;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <img id="icon" src="./image/flower.gif" alt="">
    <p id="word">我对你的爱滔滔不绝..</p>
    <div id="number">4</div>
    <script type="text/javascript" >
        //1.拿到要操作的标签
        var img = document.getElementById(icon);
        var word = document.getElementById(word);
        var number = document.getElementById(number);
        //2.设置定时器
        var timer = setInterval(function () {
            //改变倒计时数字
            number.innerText -=1;
            //判断
            if (number.innerText == 0){
                // 清除定时器
                clearInterval(this.timer);
                //显示
                word.style.display = block;
                img.style.display = inline-block;
                //隐藏number
                number.style.display = none;

            }

        },1000)
    </script>
</body>
</html>

 

JavaScript-06-Dom操作

标签:变量   col   nbsp   inter   none   切换图片   nts   script   ima   

原文地址:https://www.cnblogs.com/StevenHuSir/p/10203144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!