zoukankan      html  css  js  c++  java
  • 事件监听,冒泡排序,切换图片,轮播

    事件监听方法:

    var a11=document.getElementById('id1');  //先获取标签

    var a22=document.getElementById('id1'); //先获取标签

    a11.addEventListener('click',show);  //给元素addEventListener点击事件。

    a22.onClick=function{

    a11.removeEventListener('click',show);  之后给另一个元素添加点击事件-remove掉上个标签的事件

    function show(){}  //设置的点击事件show

    冒泡排序:

    对数组array=[9,4,3,1,2,6,7,8,5,0]进行排序

    function(){

    for(var i=0;i<array.length;i++){   //循环length遍

      for(var j=0;j<array.lenth-j;i++){

      if(array[j]>array[j+1]({   //比较相邻的两个数,如果前一个数大于后一个数,则两数互换。

      temp=array[j];  //互换

      array[j]=array[j+1];

      array[j+1]=temp;

    } } } }

    点击切换上一张图、下一张图:

    将图片的地址放入一个数组中,通过索引调用。

    var array=['img/1.png','img/2.png','img/3.png];

    设置一个img标签,用来放图片

    var img1=getElementById('id');获取该标签,标签要设置onClick="next()"

    var num=1; 设置索引初始值。

    设置点击事件function next(){

    设置img1的src属性为下一张图片的数组索引,即:

    img1.setAttribute('src',array[num]);

    num++;  循环添加

    因num<=array.length-1,所以设置num超过索引允许的最大值后,恢复为最小值0;

    if(num>array.length-1){

    num = 0;}

    轮播图:

     给上述切换下一张图使用的next()方法,设置setInternal定时器即可实现:每过1秒切换下一张。

    var time1=setInterval('next()',1000);   //每过1秒调用一次next()

    function stop(){          //调用stop方法就可以清除定时器。

    clearInterval('next()',1000);}    

    function start(){          //调用start方法就可以设置定时器。

    time1=setInterval('next()',1000);}  

  • 相关阅读:
    CF698C LRU
    关于 Exists 的几种嵌套查询
    React中使用useState()导致的问题记录
    react报错:Legacy context API has been detected within a strict-mode tree.
    vue-cli3.0 + typescript 构建项目
    VUE3.0 + TS 项目实战 (2)基本写法
    vue图片剪辑
    实现直播间消息评论滚动,顶部消失效果
    js 实现数组元素交换位置
    JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换,删除对应数据
  • 原文地址:https://www.cnblogs.com/god3064371/p/11375222.html
Copyright © 2011-2022 走看看