DOM的操作

作者: 阿凡提说AI | 来源:发表于2017-07-16 16:20 被阅读5次

JQuery 17
Vue解决了哪些问题
jQuery中的DOM操作
DOM (javascript DOM节点操作)
jQuery中的DOM操作
jQuery——DOM
会jquery 就能快速快速上手 vue？你仿佛在说笑
JQuery---dom相关节点操作
vue 基础 el data name V-once v-htm
React填坑

1.来回切换图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
</head>
<body>
![](image/icon_01.png)
<p></p>
<button class="pre" onclick="pre();">上一张</button>
<button class="next" onclick="next();">下一张</button>

<!--<script src="js/index.js"></script>-->
<script type="text/javascript">
   // 拿到所有的标签
    var icon = document.getElementsByClassName('icon')[0];

     var maxImgCount = 9;
     var minImgCount = 1;
     var currentImg = minImgCount;
    // 点击上一张
    function pre(){
       if(currentImg == minImgCount){
           currentImg = maxImgCount;
       }else{
          currentImg = currentImg - 1;
       }
       icon.src = "image/icon_0" + currentImg + ".png"
    }
    // 点击下一张
    function next(){
       if(currentImg == maxImgCount){
           currentImg = minImgCount;
       }else{
           currentImg = currentImg + 1;
       }
      icon.src = "image/icon_0" + currentImg + ".png"
    }
</script>
</body>
</html>

2.倒计时

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            margin: 50px;
            display: none;
        }

        .time{
            margin: 50px;
            font-size: 200px;
            color: red;
        }
    </style>
</head>
<body>
![](image/img_03.jpg)
<div class="time">5</div>

<script type="text/javascript">
    // 拿到对应的标签
    var img = document.getElementsByName('icon')[0];
    var div = document.getElementsByClassName('time')[0];

   //  计时器
   var timer = setInterval(function(){
         div.innerHTML = div.innerHTML -1;
         // 判断
         if(div.innerHTML == '0'){
            // 清除计时器
             clearInterval(timer);
            // 隐藏div
             div.style.display = 'none';
            // 显示图片
             img.style.display = 'inline-block';
         }
     }, 1000);


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

3.js的事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div>111</div>

<script type="text/javascript">
    window.onload = function(){
        alert('加载完毕');
    }

//    window.onunload = function(){
//        alert('退出');
//    }
    var div = document.getElementsByTagName('div')[0];
    // 点击鼠标
    div.onmousedown = function(){
        div.style.background = 'green';
    }
    // 抬起鼠标
    div.onmouseup = function(){
        div.style.backgroundImage = 'url("image/img_03.jpg")';
    }

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