JavaScript动态更新的两种方法

1.将按钮点击事件写在js外面,拿到按钮后,处理点击事件操作。

<!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.将按钮点击事件在js里面直接赋值。

<!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">上一张</button>
<button class="next">下一张</button>

<!--<script src="js/index.js"></script>-->
<script type="text/javascript">
    // 拿到所有的标签
    var icon = document.getElementsByClassName('icon')[0];
    var button1 = document.getElementsByClassName('pre')[0];
    var button2 = document.getElementsByClassName('next')[0];
    var maxImgCount = 9;
    var minImgCount = 1;
    var currentImg = minImgCount;
    // 点击上一张
    button1.onclick = function pre(){
        if(currentImg == minImgCount){
            currentImg = maxImgCount;
        }else{
            currentImg = currentImg - 1;
        }
        icon.src = "image/icon_0" + currentImg + ".png"
    }
    // 点击下一张
    button2.onclick = function next(){
        if(currentImg == maxImgCount){
            currentImg = minImgCount;
        }else{
            currentImg = currentImg + 1;
        }
        icon.src = "image/icon_0" + currentImg + ".png"
    }
</script>
</body>
</html>
  • 网页加载完毕调用window.onload方法。
<script type="text/javascript">
    window.onload = function(){
        alert('加载完毕');
    }
</script>
  • 网页退出调用window.onunload方法。
<script type="text/javascript">
    window.onunload = function(){
        alert('退出');
    }
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,543评论 1 11
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,807评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,338评论 0 5
  • 我们先大致来了解一下javascript的内容,然后由浅入深的来学习,进一步提升对WEB前端技术的兴趣。 如何插入...
    yezi1004阅读 1,338评论 0 0
  • 第1章 系好安全带,准备启航 1.1让你认识JS 1.1.1 JavaScript能做什么?增强页面动态效果(...
    张中华阅读 1,415评论 4 10