用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，所以关掉浏览器再关上页面展现的也仍旧是最初点击的那次程序，这就避免了主持人误操作后遗记了城市程序。另一个页面不仅能够记录，还有清空按钮。