倒计时(原生写法)

最新推荐文章于 2024-03-01 16:15:09 发布
原创 最新推荐文章于 2024-03-01 16:15:09 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style type="text/css">
        html,body,div,span{
            font-size: 16px;
            font-family: "微软雅黑";
        }
        #div1{
            width: 600px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin:50px auto;
            background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace);
            background: -webkit-linear-gradient(left,red,#f96,yellow,green,#ace);
            background: -o-linear-gradient(left, red, #f96, yellow, green, #ace);
        }
        #date1,#hour1,#minute1,#second1{
            color: red;
            font-weight: bold;
        }
        #date2,#hour2,#minute2,#second2{
            color:#c49d62;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="div1">
    <span>距离您中奖还有</span>
    <span id="date1"></span><span id="date2"></span><span>天</span>
    <span id="hour1"></span><span id="hour2"></span><span>时</span>
    <span id="minute1"></span><span id="minute2"></span><span>分</span>
    <span id="second1"></span><span id="second2"></span><span>秒</span>
</div>
    <script type="text/javascript">
    // 注：这里用到的当前时间为本机电脑时间，如果是项目需要，请获取服务器当前时间来做计算部分
        function addZero(num){
            //此方法为处理一位数字的时候添零补齐两位
            return num<10?"0"+num:num;
        }
        function remind(){
            var str="2015-7-26 13:53:00";
            str=str.replace(/[-]/g,"/");
            var oDate1=document.getElementById('date1');
            var oDate2=document.getElementById('date2');
            var oHour1=document.getElementById('hour1');
            var oHour2=document.getElementById('hour2');
            var oMinute1=document.getElementById('minute1');
            var oMinute2=document.getElementById('minute2');
            var oSecond1=document.getElementById('second1');
            var oSecond2=document.getElementById('second2');
            //注：以上为获取元素，以下为计算时间
            var spanTimeNow =new Date().getTime();//当前时间距离1970年1月1日午夜之间的毫秒数
            var spanTimeTarget= Date.parse(str);//目标时间距离1970年1月1日午夜之间的毫秒数
            var spanTime=spanTimeTarget-spanTimeNow;
            var date=addZero(Math.floor(spanTime/(1000*60*60*24)));
            var hour=addZero(Math.floor(spanTime/(1000*60*60)-date*24));
            var minute=addZero(Math.floor(spanTime/(1000*60)-date*24*60-hour*60));
            var second=addZero(Math.floor(spanTime/1000-date*24*60*60-hour*60*60-minute*60));
            //注：将获得的时间添加到指定位置
            oDate1.innerHTML=date.toString().substr(0,1);
            oDate2.innerHTML=date.toString().substr(1,1);
            oHour1.innerHTML=hour.toString().substr(0,1);
            oHour2.innerHTML=hour.toString().substr(1,1);
            oMinute1.innerHTML=minute.toString().substr(0,1);
            oMinute2.innerHTML=minute.toString().substr(1,1);
            oSecond1.innerHTML=second.toString().substr(0,1);
            oSecond2.innerHTML=second.toString().substr(1,1);
        }
        // window.setInterval(function(){
        //     remind();
        // },6000)
        window.setInterval(remind,1000);//只有在remind里面没有参数
    </script>
</body>
</html>
用android studio实现倒计时,AndroidStudio项目制作倒计时模块
weixin_33037713的博客
05-27 2793
前言大家好，我是 Vic，今天给大家带来AndroidStudio项目制作倒计时模块的概述，希望你们喜欢项目难度AndroidStudio项目制作倒计时模块的难度，不是很大，就是主要用了Timer和TimerTask这两个，接着就是现实界面的一些基础效果。设计界面做个倒计时的界面就比较好想了，就如下界面控件填写倒计时时间获取倒计时时间显示倒计时开始计时停止计时就在自动创建的activity_mai...
flutter 调用原生安卓插件_Flutter知识点: Flutter与原生(Android)的交互
weixin_35231615的博客
12-29 618
Flutter与原生的交互主要通过MethodChannel的方式本文只列举两种形式的插件，掌握基础的插件写法，举一反三，例如我github项目中的高德定位，6.0以上权限申请等，还需要掌握iOS的的基础语言o c,swift才能编写iOS插件。效果GIFChannel.gif从Flutter界面跳转到原生，且带参数1. 实现插件public class FlutterPluginJumpToA...
原生JS写法精简倒计时(时分秒)
10-29
* 原生JS写法，精简倒计时 * 用法： * var test = new JJCountdown(计时总时间, 显示计时dom_id, 回调函数).show(); // output hh:mm:ss 00:00:00 * var test = new JJCountdown(计时总时间, 显示计时dom_id, 回调函数).show('m'); // output mm:ss 00:00 * var test = new JJCountdown(计时总时间, 显示计时dom_id, 回调函数).show('s'); // output ss 00
JS - 实现简单易用的倒计时 x 天 x 时 x 分 x 秒
weixin_30344995的博客
07-12 181
<script> (function () { var tian = document.getElementsByClassName('JS-tian')[0]; var shi = document.getElementsByClassName('JS-shi')[0]; var fen = document.getElementsByClassName('J...
计时器的两种原生写法
weixin_30518397的博客
01-20 301
方法一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计时器</title> <style type="text/css"> *{margin:0;padding:0;} .cou...
关于js倒计时的一种写法
shaunH的博客
04-23 599
var data = new Date() var days = parseInt(data / 1000 / 60 / 60 / 24, 10); var hours = parseInt(data / 1000 / 60 / 60 % 24, 10) var minutes = parseInt(data / 1000 / 60 % 60...
倒计时有三种写法
小陈技术空间
02-17 3555
定时器有三种实现方法 setTimeout setInterval questAnimationFrame setTimeout var a = 10; var date = new Date(); setTimeout(function () { console.log(a--); if (a&gt;=0) { setTimeout(arguments....
常用轮播图写法汇总
12-24
使用原生JavaScript编写轮播图，虽然相比使用库或插件更复杂，但可以更好地控制性能和资源。通常需要处理事件监听、DOM操作、计时器以及动画效果等。这样的实现方式对开发者的技术要求较高，但可以提升页面性能，...
import router from '@ohos.router'; import { notificationManager } from '@kit.NotificationKit'; import { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; @Entry @Component struct Index { @State inputText: string = ''; private notificationId: number = 1; // 普通文本通知 private publishBasicTextNotification() { if (!this.inputText) { AlertDialog.show({ message: '请输入通知内容', autoCancel: true }); return; } let notificationRequest: notificationManager.NotificationRequest = { id: this.notificationId++, content: { notificationContentType: notificationManager.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, normal: { title: '普通文本通知', text: this.inputText, additionalText: '来自鸿蒙应用' } } }; notificationManager.publish(notificationRequest, (err: BusinessError) => { if (err) { hilog.error(0xFF00, '[NotificationDemo]', `发布失败: ${err.message}`); AlertDialog.show({ message: '通知发布失败', autoCancel: true }); } else { hilog.info(0xFF00, '[NotificationDemo]', '普通文本通知发布成功'); AlertDialog.show({ message: '通知发布成功', autoCancel: true }); } }); } // 多行文本通知 private publishMultiLineNotification() { let notificationRequest: notificationManager.NotificationRequest = { id: this.notificationId++, content: { notificationContentType: notificationManager.ContentType.NOTIFICATION_CONTENT_MULTILINE, multiLine: { title: '多行文本通知', text: '这是一个多行文本通知示例', briefText: '多行内容概要', longTitle: '展开后的长标题', lines: [ '第一行内容', '第二行内容', '第三行内容', '第四行内容' ] } } }; notificationManager.publish(notificationRequest, (err: BusinessError) => { if (err) { hilog.error(0xFF00, '[NotificationDemo]', `发布失败: ${err.message}`); AlertDialog.show({ message: '通知发布失败', autoCancel: true }); } else { hilog.info(0xFF00, '[NotificationDemo]', '多行文本通知发布成功'); AlertDialog.show({ message: '通知发布成功', autoCancel: true }); } }); } // 倒计时提醒 private publishCountdownNotification() { let countdown: number = 10; let notificationId = this.notificationId++; // 更新倒计时的函数 const updateCountdown = () => { let notificationRequest: notificationManager.NotificationRequest = { id: notificationId, content: { notificationContentType: notificationManager.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, normal: { title: '倒计时提醒', text: `剩余时间: ${countdown}秒`, additionalText: '10秒倒计时结束提醒' } } }; notificationManager.publish(notificationRequest, (err: BusinessError) => { if (err) { hilog.error(0xFF00, '[NotificationDemo]', `更新失败: ${err.message}`); } else { hilog.info(0xFF00, '[NotificationDemo]', `倒计时更新: ${countdown}秒`); } }); }; // 初始发布 updateCountdown(); // 设置定时器更新倒计时 const timer = setInterval(() => { countdown--; if (countdown >= 0) { updateCountdown(); } else { clearInterval(timer); // 倒计时结束，发布完成通知 let finishRequest: notificationManager.NotificationRequest = { id: notificationId, content: { notificationContentType: notificationManager.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, normal: { title: '倒计时提醒', text: '10秒倒计时已结束', additionalText: '任务完成' } } }; notificationManager.publish(finishRequest, (err: BusinessError) => { if (err) { hilog.error(0xFF00, '[NotificationDemo]', `结束通知失败: ${err.message}`); } else { hilog.info(0xFF00, '[NotificationDemo]', '倒计时结束通知发布成功'); } }); } }, 1000); } build() { Column() { Text('通知功能演示') .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ top: 50, bottom: 30 }) // 使用ArkTS原生TextInput组件 // 修正后的 TextInput 使用方式 TextInput({ placeholder: '请输入通知内容' }) .onChange((value: string) => { this.inputText = value; }) .type(InputType.Normal) // 使用链式调用设置类型 .width('90%') .margin({ bottom: 20 }) .backgroundColor('#F5F5F5') .borderRadius(8) .padding(10) Button('发布普通文本通知') .width('90%') .margin({ bottom: 15 }) .onClick(() => { this.publishBasicTextNotification(); }) Button('发布多行文本通知') .width('90%') .margin({ bottom: 15 }) .onClick(() => { this.publishMultiLineNotification(); }) Button('发布10秒倒计时提醒') .width('90%') .onClick(() => { this.publishCountdownNotification(); }) } .width('100%') .height('100%') .padding(20) } }为什么发布通知都失败了，而且十秒那个还没有反应，请你仔细排查错误并帮我改正
最新发布
05-29
好的，我现在需要解决用户的问题，即鸿蒙应用中NotificationManager发布通知失败，以及倒计时通知无反应的情况。首先，我得回忆一下鸿蒙的通知机制和相关API的使用方法。用户提到了NotificationManager，这可能涉及...
js原生倒计时
qq_44261638的博客
05-30 150
<!DOCTYPE html> <html> <head> <title> 倒计时 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Generator" content="Edit...
原生JS时分秒倒计时
03-12
原生JS时分秒倒计时，简洁易懂的公式，包括剩余天数，小时，分钟，秒，毫秒
原生js--倒计时
Tracy_di的博客
05-12 304
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>倒计时</title> <style> .block{ margin:auto; tex...
倒计时的简单写法
爱吃糖果儿哒莲
01-03 1518
今天小编给大家分享一下倒计时的简便写法 <body> <h1>距过年还剩：</h1> <h2 id="h2">2月1天 6小时 5分钟 30秒</h2> <script> setInterval(function(){ //现在的时间戳 var nowTime=new Date().getTime
如何写好倒计时
weixin_41394875的博客
07-24 1030
引言 本文讲解倒计时为什么建议使用setTimeout而不使用setInterval，倒计时为什么存在误差，以及如何解决。 倒计时器 在前端开发中，倒计时器功能比较常见，比如活动倒计时，假定只有10秒，比较常见的两种写法如下： //setTimeout实现方式 var countdownTime = 10; //倒计时秒数 var countdown = function() { var setTimeoutHandler = setTimeout(function () { co
原生js实现倒计时
杜伊沫的博客
04-02 1308
原生原生js实现倒计时的思路 1、用原生js实现倒计时，首先得利用 Date 获取系统提供的当前时间，其实还需要一个截止时间，这样才可以去思考下来应该怎么实现倒计时这个功能 2、既然是倒计时，肯定会用setInterval(()=>, 时间数) 来实现自动计时 2、利于系统的当前时间和用户提供的截止时间，我们可以知道总共还剩多少时间，再将剩下时间分别换算成天、时、分和秒， 3、当到了截止时间...
【AE表达式】倒计时表达式
GA_Lazy的博客
03-17 2712
h=0;m=0;s=0;f=0; //赋值 f+=timeToFrames(); //获取帧数 s+=Math.floor(f*comp(“合成名”).frameDuration); //获取指定合成的一帧的长度 m+=Math.floor(s/60); //求出分钟数 h+=Math.floor(m/60); //求出小时数 f=Math.round(f%(1/comp(“合成名”).frameDuration)); s=s%60; m=m%60; if(f<10) {f=“0”+f} if(s&l
原生js实现倒计时效果
weixin_58017233的博客
03-01 623
deadline = new Date(“2024-03-03T00:00:00”)
倒计时函数
kongjiea笔记
04-02 2696
function doDouble(n){ return n<10 ? '0'+n : n } function daojishi(){ var nowTime = new Date();//获得当前时间对象 var fuTime = new Date('2014/05/01 12:30:00');//创建未来的时间对象 var diff_time = fuTime.ge
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值