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