用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，所以关掉浏览器再打开页面展示的也依旧是最后点击的那次顺序，这就防止了主持人误操作后忘记了城市顺序。另一个页面不仅可以记录，还有清空按钮。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。