关于javascript:vue实现城市排序并且将顺序记录在本地存储

35次阅读

共计 3240 个字符，预计需要花费 9 分钟才能阅读完成。

用 vue 实现点击按钮打乱五个城市程序，并且将每次点击的程序记录在本地存储中。

首页：

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 首页 </title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/common.css">
</head>

<body>


  <div id="app" v-cloak>
    <div class="index">
      <audio id="audio" src="audio/1.mp3"  loop>
        Your browser does not support the audio element.
     </audio>
      <img class="bg" src="img/bg.png" alt="">
      <img class="light" src="img/light.gif" alt="">
      <div class="content">
        <div class="item" v-for="(item, index) in city" :key="index">
          <img class="img" :src="item.src" alt />
        </div>
      </div>
      <div class="bottom-info">
        <div class="switch" @click="scatter">
          <img v-if="isOk" src="img/stop.png" alt="">
          <img v-else src="img/go.png" alt="">
        </div>
        <!-- <span class="watch" @click.once="watch"> 查看程序 </span> -->
      </div>
      <a class="detailBtn" href="sequence.html" target="_blank"> 明细 </a>
      
    </div>
  </div>
  <script src="js/vue.min.js"></script>
  <script src="js/rem.js"></script>

  <script type="text/javascript">
// localStorage
// sessionStorage
    new Vue({
      'el': '#app',
      data() {
        return {
          city: [{ name: "上海", src: "img/1.png"},
            {name: "武汉", src: "img/2.png"},
            {name: "南京", src: "img/3.png"},
            {name: "无锡", src: "img/4.png"},
            {name: "杭州", src: "img/5.png"},
          ],
          isOk: false,
          timer: null,
          obj: [],};
      },
      methods: {
        // 打乱数组程序
        randSort1(arr) {for (var i = 0, len = arr.length; i < len; i++) {var rand = parseInt(Math.random() * len);
            var temp = arr[rand];
            arr[rand] = arr[i];
            arr[i] = temp;
          }
          return arr;
        },

        scatter() {var arrs = [];
          this.isOk = !this.isOk;
          var audio = document.getElementById("audio");
          if (this.time) {clearInterval(this.time);
          };
          if (this.isOk) {audio.play();
            this.time = setInterval(() => {var arr = this.randSort1(this.city);
              this.city.forEach((item, index) => {this.$set(this.city, index, arr[index]);
              })
            }, 50);
          } else {audio.pause();
            clearInterval(this.time);
            this.city.map((item) => {arrs.push(item);
            });
            console.log(arrs)
            this.obj.push(arrs)
            localStorage.setItem('obj', JSON.stringify(this.obj));
            console.log(JSON.parse(localStorage.getItem('obj')))
          }
        },
      },
      mounted() {// localStorage.setItem('obj', JSON.stringify(this.obj));
        if(localStorage.getItem('obj')) {this.obj = JSON.parse(localStorage.getItem('obj'));
          this.city = this.obj.pop();};
      }

    })
  </script>



</body>

</html>

具体页面：

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 明细 </title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/common.css">
</head>

<body>


  <div id="app" v-cloak>
    <div class="sequence">
      <div v-for="(item, index) in sequenceArr" :key="index">
        <span> 第 {{index + 1}} 次:</span>
        <span v-for="(item2, index2) in item" :key="index2">{{item2.name}}</span>
      </div>

      <button @click="clear"> 清空 </button>

    </div>

  </div>

  <script src="js/vue.min.js"></script>
  <script src="js/rem.js"></script>

  <script type="text/javascript">

    new Vue({
      'el': '#app',
      data() {
        return {sequenceArr: JSON.parse(localStorage.getItem('obj')),
        };
      },
      methods: {clear() {localStorage.removeItem("obj");
          this.sequenceArr = localStorage.removeItem("obj")
        }
      },
      mounted() {// this.sequenceArr = JSON.parse(localStorage.getItem('obj'));
        console.log(this.sequenceArr)
      }

    })
  </script>


  <style>
    .sequence {
      font-size: 20px;
      /* padding-top: 50px; */
    }

    .sequence span {margin-right: 10px;}

    button {
      width: 100px;
      height: 50px;
      margin-top: 20px;
    }

  </style>

下面的代码实现了点击切换城市，和记录点击的每次程序，因为用了 localStorage，所以关掉浏览器再关上页面展现的也仍旧是最初点击的那次程序，这就避免了主持人误操作后遗记了城市程序。另一个页面不仅能够记录，还有清空按钮。

正文完