vue实现类似时间轴预警条

约 4 分钟 · 2049 字 · 142 views
 ›
vue实现类似时间轴预警条

  1. vue方式

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
 body {
   background-color: bisque;
 }
 .item {
   width: 25px;
   height: 50px;
   color: pink;
 }
 .item1 {
   background-color: red;
   float: left;
 }
 .item2 {
   background-color: #fff;
   float: left;
 }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="app">
 <div @click="touch(i)" v-for="(item, i) in arr" class="box">
   <div v-if="item === 1" class="item item1">{{ i }}</div>
   <div v-if="item === 0" class="item item2"></div>
 </div>
</div>

<script>
 new Vue({
   el: '.app',
   data: {
     arr: [0, 1, 1, 0, 1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0],
   },
   methods: {
     touch(len) {
       alert(len)
     },
   },
 });
</script>
</body>
</html>
  1. 纯js方法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: bisque;
    }
    .item {
      width: 25px;
      height: 50px;
      color: pink;
    }
    .item1 {
      background-color: red;
      float: left;
    }
    .item2 {
      background-color: #fff;
      float: left;
    }
  </style>

</head>
<body>
<div id="divs">

</div>


<script>
  //返回0 1 字符串
  function returnstring() {
      var arr=[0, 1, 1,
          0, 1, 1, 0, 1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,
          0, 1, 1, 0, 1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0];
      return arr
  }

  //生成图片 单张
  function creat_oneimgdiv(){

        arr=returnstring();
        arrlen=arr.length;
        var div_str="";
        for( i in arr){
            console.log(i);
            flag=arr[i];
            frimetime=parseInt(i)+1;
            if (flag==1){
                div_str=div_str+"<div class=\"item item2\" onclick=\"alert("+frimetime+")\"></div>"
            }
            if (flag==0){
                div_str=div_str+"<div class=\"item item1\" onclick=\"alert("+frimetime+")\"></div>"
            }
        }
        //把数据打印到页面上
        oDiv = document.createElement('div');
        oDiv.innerHTML = div_str;
        document.getElementById("divs").appendChild(oDiv);

    }
    creat_oneimgdiv()
</script>
</body>
</html>

3.

📌 相关阅读