1.vue倒計時
<template>
<div class="content">
<div class="time_div">
<h3 style="padding-bottom:20px">操作成功</h3>
<p>
<div>
<b id="second" style="color:red">{{number}}</b>秒后回到主頁
</div>
<div @click="return_url()" style="padding-top:20px;color: #3b76e5;cursor: pointer;">立即返回</div>
</p>
</div>
</div>
</template>
<script>
import { success1, warning1, baseUrl } from "../api/tips.js";
export default {
data() {
return {
number: 5,
};
},
mounted() {
var that = this;
var sec = document.getElementById("second");
var i = 5;
var timer = setInterval(function () {
if (i > 0) {
i--;
}
sec.innerHTML = i;
if (i == 0) {
that.return_url()
clearInterval(timer);
}
}, 1000)
},
methods: {
return_url() {
this.$router.push({ path: "/userCenter/platView" });
}
}
};
</script>
<style scoped>
.content {
display: flex;
justify-content: center;
}
.time_div {
margin-top: 100px;
text-align: center;
width: 300px;
background: #fff;
padding: 20px 50px;
}
</style>
2.非vue倒計時
<!DOCTYPE html>
<html>
<head>
<title>瀏覽器對象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<h3>操作成功</h3>
<p>
<b id="second">5</b>秒后回到主頁 <a href="javascript:goBack();">返回</a>
</p>
<script type="text/javascript">
//獲取顯示秒數(shù)的元素，通過定時器來更改秒數(shù)。
var sec = document.getElementById("second");
var i=5;
var timer = setInterval(function(){
i--;
sec.innerHTML = i;
if(i ==0){
window.location.;
}
},1000)
//通過window的location和history對象來控制網(wǎng)頁的跳轉(zhuǎn)。
function goBack(){
window.history.go(-1);
}
</script>
</body>
</html>
