JS小案例锦集

 

1，图片轮播，实现点击按钮按顺序和循环切换

效果图：

实现代码：

#outbox {
        margin: 20px auto;
        width: 500px;
        height: 380px;
        border: 1px solid black;
      }
      #box img {
        width: 500px;
        height: 325px;
      }
      .top {
        text-align: center;
      }
      #box {
        width: 500px;
        height: 325px;
        position: relative;
      }
      #box #content {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.3);
        top: 0;
        height: 20px;
        width: 500px;
        margin: 0;
        text-align: center;
        color: white;
      }
      #left {
        display: block;
        width: 40px;
        height: 50px;
        border: 1px solid black;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 135px;
        left: 0;
        cursor: pointer;
      }
      #right {
        display: block;
        width: 40px;
        height: 50px;
        border: 1px solid black;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 135px;
        right: 0;
        cursor: pointer;
      }

结构层次：

    

      

        
        
      

      

        
1/4
        <
        >
        
      
    

    
  

2、输入框输入数字，在页面显示v字形

分析：对奇偶数的处理

效果图：

代码实现：

#box{
        position: relative;
      }
      span {
        display: block;
        width: 50px;
        height: 50px;
        background-color: red;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 30px;
        position: absolute;
      }

var oInp = document.getElementById("inp"),
        btn = document.getElementById("btn"),
        box = document.getElementById("box");
      
      btn.onclick = function() {
        var str = "";
        var num = Number(oInp.value); 
        // console.log(num);
        for(var i=0;i'+(i+1)+'';
            }else{
                str += ''+(i+1)+'';
            }           
        }
        box.innerHTML = str;
      };

3、图片电子时间

效果图：

function change() {
        var imgList = document.getElementsByClassName("img");
        var date = new Date();
        var hour = date.getHours()+'';
        var min = date.getMinutes()+'';
        var sec = date.getSeconds()+'';
        var str = addZero(hour) + addZero(min) + addZero(sec);
        console.log(str);

        for (var i = 0; i < str.length; i++) {
          imgList[i].src = "img/" + str[i] + ".JPG";
        }

        // 判断时间小于10，添加0补位
        function addZero(time) {
          return time < 10 ? "0" + time : time;
        }
      }
      setInterval(change,1000)
      change();

4、表单数据操作

效果图

代码实现：

    
    

      

        
姓名
        
年龄
        
性别
        
城市
      
    

 var table = document.getElementsByTagName("table")[0];
      var inputs = document.getElementsByTagName("input");
      var ary = [
        { name: "张三", age: 15, sex: 0, city: "北京" },
        { name: "莉莉丝", age: 25, sex: 0, city: "衡州" },
        { name: "王晓婉", age: 20, sex: 1, city: "北京" },
        { name: "郝建", age: 17, sex: 1, city: "成都" },
        { name: "周小华", age: 30, sex: 0, city: "南京" }
      ];
      var str = "";
      var flag = true;
      var ary2 = nameSort();
      var ary3 = ageSort();

      //生成表格函数
      function create(array) {
        str = "姓名年龄性别城市";
        for (var i = 0; i < ary.length; i++) {
          str += "";
          for (var key in ary[i]) {
            if (key == "age") {
              if (ary[i].age < 18) {
                str += '' + ary[i][key] + "";
              } else {
                str += "" + ary[i][key] + "";
              }
            } else {
              str += "" + ary[i][key] + "";
            }
          }
          str += "";
        }
        table.innerHTML = str;
      }
      create(ary);//预渲染一次

      //姓名排序封装函数
      function nameSort() {
        if (flag == true) {
          var ary2 = ary.sort(function(a, b) {
            return a.name.localeCompare(b.name, "zh");
          });
          flag = false;
        } else {
          var ary2 = ary.sort(function(a, b) {
            return b.name.localeCompare(a.name, "zh");
          });
          flag = true;
        }
      }
      
       //年龄排序封装函数
      function ageSort() {
        if (flag == true) {
          var ary3 = ary.sort(function(a, b) {
            return a.age - b.age;
          });
          flag = false;
        } else {
          var ary3 = ary.sort(function(a, b) {
            return b.age - a.age;
          });
          flag = true;
        }
      }

      //按姓名点击事件
      inputs[0].onclick = function() {
        nameSort();
        create(ary2);
      };
      //按年龄点击事件
      inputs[1].onclick = function() {
        ageSort();
        create(ary2);
      };