倒计时方式代码-uniapp，js

最新推荐文章于 2025-04-11 13:39:57 发布

wy在路上

最新推荐文章于 2025-04-11 13:39:57 发布

阅读量4.8k

点赞数

分类专栏： uniapp

uniapp 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在uni-app中使用自定义倒计时组件，实现不同样式和功能的倒计时显示，包括基本使用、样式定制及原生JS倒计时实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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  返回格式为日期或时间的表达式。formatDateTime
			var 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>