JS小案例锦集

最新推荐文章于 2022-12-31 14:44:05 发布

三生石上缘

最新推荐文章于 2022-12-31 14:44:05 发布

阅读量323

点赞数

分类专栏： JavaScript 文章标签： js案例表单电子时钟图片轮播

本文链接：https://blog.csdn.net/qq_43239707/article/details/100046272

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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;
      }

结构层次：

<body>
    <div id="outbox">
      <p class="top">
        <input type="button" value="顺序" id="order" />
        <input type="button" value="循环" id="circulation" />
      </p>

      <div id="box">
        <p id="content">1/4</p>
        <span id="left"><</span>
        <span id="right">></span>
        <img src="img/01.jpg" alt="" id="img" />
      </div>
    </div>

    <script>
      var outbox = document.getElementById("outbox"),
        order = document.getElementById("order"),
        circulation = document.getElementById("circulation"),
        left = document.getElementById("left"),
        right = document.getElementById("right"),
        oImg = document.getElementById("img"),
        number = document.getElementById("number"),
        content = document.getElementById("content");

      arr = ["img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg"];
      var num = 0;
      //用标记判断当前是否顺序还是循环
      var flag = true;
      order.onclick = function() {
        flag = true;
      };
      circulation.onclick = function() {
        flag = false;
      };

      left.onclick = function() {
        num--;
        if (num == -1) {
          if (flag) {
            alert("已经是第一张了");
            num = 0;
          } else {
            num = arr.length - 1;
          }
        }
        oImg.src = arr[num];
        content.innerHTML = num+1 + "/" + arr.length;
      };

      right.onclick = function() {
        num++;
        if (num == arr.length) {
          if (flag) {
            alert("已经是最后一张！");
            num = arr.length - 1;
          } else {
            num = 0;
          }
        }
        oImg.src = arr[num];
        content.innerHTML = num + 1+"/" + arr.length;
      };
    </script>
  </body>

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;
      }

<input type="text" id="inp" />
<input type="button" name="" id="btn" value="V字形" />
<div id="box"></div>

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<num;i++){
            if(i<num/2){
                str += '<span style="top:'+i*50+'px;left:'+i*50+'px">'+(i+1)+'</span>';
            }else{
                str += '<span style="top:'+(num-i-1)*50+'px;left:'+i*50+'px">'+(i+1)+'</span>';
            }           
        }
        box.innerHTML = str;
      };

3、图片电子时间

效果图：

<img src="img/0.JPG" alt="" class="img" />
<img src="img/0.JPG" alt="" class="img" />
<img src="img/colon.JPG" alt="" />
<img src="img/0.JPG" alt="" class="img" />
<img src="img/0.JPG" alt="" class="img" />
<img src="img/colon.JPG" alt="" />
<img src="img/0.JPG" alt="" class="img" />
<img src="img/0.JPG" alt="" class="img" />

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、表单数据操作

效果图

代码实现：

<input type="button" value="按姓名排序" />
    <input type="button" value="按年龄排序" />
    <table border="1">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>城市</th>
      </tr>
    </table>

 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 = "<tr><th>姓名</th><th>年龄</th><th>性别</th><th>城市</th></tr>";
        for (var i = 0; i < ary.length; i++) {
          str += "<tr>";
          for (var key in ary[i]) {
            if (key == "age") {
              if (ary[i].age < 18) {
                str += '<td style="color:red">' + ary[i][key] + "</td>";
              } else {
                str += "<td>" + ary[i][key] + "</td>";
              }
            } else {
              str += "<td>" + ary[i][key] + "</td>";
            }
          }
          str += "</tr>";
        }
        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);
      };

三生石上缘

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS小案例锦集

1，图片轮播，实现点击按钮按顺序和循环切换效果图：实现代码：#outbox { margin: 20px auto; width: 500px; height: 380px; border: 1px solid black; } #box img { width: 5...
复制链接

扫一扫