倒计时方式代码-uniapp，js"/>
倒计时方式代码-uniapp，js
uni-app：需导入组件
<template><view><!-- 示例1 --><view><uni-countdown :timer="timer1"></uni-countdown></view><!-- 示例2：绿底白字 --><view style="background:#00B26A; padding:50upx 0;"><!-- 割符号颜色splitorColor --><uni-countdown :timer="timer2" borderColor="#FFFFFF" splitor-color="#FFF" fontColor="#FFFFFF" bgrColor="none"></uni-countdown></view></view>
</template>
<script>import uniCountdown from "../../components/uni-countdown.vue";export default {data() {// Date 对象用于处理日期和时间var dateObj = new Date();// getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。var currentTime = dateObj.getTime();var timer1 = this.formatDateTime((currentTime + 1000 * 2000));//2秒 60x60=1h 返回格式为日期或时间的表达式。formatDateTimevar timer2 = this.formatDateTime((currentTime + 1000 * 3601)); return {title: '倒计时',timer1: timer1,timer2: timer2,}},components: {uniCountdown},methods: {formatDateTime(inputTime) { //时间戳 转 YY-mm-dd HH:ii:ss var date = new Date(inputTime);var y = date.getFullYear();var m = date.getMonth() + 1;m = m < 10 ? ('0' + m) : m;var d = date.getDate();d = d < 10 ? ('0' + d) : d;var h = date.getHours();h = h < 10 ? ('0' + h) : h;var minute = date.getMinutes();var second = date.getSeconds();minute = minute < 10 ? ('0' + minute) : minute;second = second < 10 ? ('0' + second) : second;return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;}},}
</script><style></style>原生js写法
【方法1-距离下个时期所剩时间段】
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">function dayBetween(){var today = new Date();// var enday = new Date(2019,03,05,0,0,0,0); //或 new Date("2016/12/31 0:0:0");var enday = new Date("2019/3/5 0:0:0");var between = enday-today;// console.log("between"+between+"\n");var sec = Math.floor(between/1000);var day = Math.floor((Math.floor((Math.floor(sec/60))/60))/24); var hours = (Math.floor((Math.floor(sec/60))/60))%24;var minutes = (Math.floor(sec/60))%60 ;var seconds = sec%60;// console.log("result:"+day+"天"+hours+"时"+minutes+"分"+seconds+"秒");var t = document.getElementById("time");t.innerHTML = "离2019年3月5日0点还剩："+"<b>"+day+"天"+hours+"时"+minutes+"分"+seconds+"秒"+"</b>";}window.onload = function(){setInterval(dayBetween,1000);};
</script>
</head>
<body>
<p id="time"></p>
</body>
</html>
【方法二-1h倒计时】
<html>
<head>
<meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript"> var maxtime = 60 * 60; //一个小时，按秒计算，自己调整! function CountDown() {if (maxtime >= 0) {minutes = Math.floor(maxtime / 60);seconds = Math.floor(maxtime % 60);msg = "距离结束还有" + minutes + "分" + seconds + "秒";document.all["timer"].innerHTML = msg;if (maxtime == 5 * 60)alert("还剩5分钟");--maxtime;} else{clearInterval(timer);alert("时间到，结束!");}}timer = setInterval("CountDown()", 1000); </SCRIPT>
</head>
<body>
<div id="timer" style="color:red"></div>
<div id="warring" style="color:red"></div>
</body>
</html>
更多推荐
倒计时方式代码-uniapp,js
发布评论