JSP倒计时显示

已于 2022-03-29 21:16:01 修改
阅读量567 收藏 4
点赞数 2
分类专栏： JavaScript 文章标签： 前端
于 2022-03-29 20:49:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44302503/article/details/123831620
版权

倒计时显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 将时间戳转换为时分秒，转换格式如下：
        day=parseInt(总秒数/60/60/24);//计算天数
        hour=parseInt(总秒数/60/60);//计算小时数
        minuate=parseInt(总秒数/60%60);//计算分钟数
        second=parseInt(总秒数%60);//计算秒数 */
        function countDown(time)
        {
            var nowTime=+new Date();//返回当前时间总毫秒数
            var inputTime=+new Date(time);//返回用户输入的时间总毫秒数
            var times=(inputTime-nowTime)/1000;//times是剩余时间总秒数
            var day=parseInt(times/60/60/24);//计算天数
            day=day<10?'0'+day:day;
            var hour=parseInt(times/60/60);//计算小时数
            hour=hour<10?'0'+hour:hour;
            var minuate=parseInt(times/60%60);//计算分钟数
            minuate=minuate<10?'0'+minuate:minuate;
            var second=parseInt(times%60);//计算秒数
            second=second<10?'0'+second:second;
            return '剩余'+day+'天'+hour+'小时'+minuate+'分钟'+second+'秒';
        }
        console.log(countDown('2022-3-30 18:00:00'));//此处更改所需要的时间
    </script>
</head>
<body>
    
</body>
</html>

控制台结果展示：
在这里插入图片描述

一斤阳光
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯jsp实现的倒计时动态显示效果完整代码
10-23
主要介绍了纯jsp实现的倒计时动态显示效果代码,涉及JSP时间操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jsp网页倒计时跳转页面
老辉辉的博客
12-23 3324
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> var i=3; function getTime(){ document.getElementById('num').innerHTML=""+i+""; i-=1; var x=setTimeout('g
jsp 自动倒数_jsp倒计时简单实现方法
weixin_42507981的博客
02-17 1051
本文实例讲述了jsp倒计时简单实现方法。分享给大家供大家参考，具体如下：//当前时间毫秒数Long current_time1=System.currentTimeMillis();//结束时间毫秒数Long end_time2=1337875200000l;//计算时间差Long time2=end_time2-current_time1;//转换为秒数int second=(int)(time...
jsp 倒计时js
bestlove12345的博客
11-02 449
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <div id="showTimes">  long current_time=System.currentTimeMillis();  long end_time=1337875200000l;
纯jsp中实现倒计时动态显示效果。
web开发
05-05 571
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;div id="showTimes"&gt;&lt;/div&gt; &lt;% long current_time=System.currentTimeMillis(); long end_time=13
javascript之10秒倒计时
m7k7k999的博客
11-24 4123
javascript之十秒倒计时,定时器函数,触发事件
jsp中实现倒计时
熊猫的博客
03-20 1731
jsp： &lt;section&gt;还有&lt;b class="day" id="d"&gt;10&lt;/b&gt;天&lt;b class="hour" id="h"&gt;5&lt;/b&gt;小时&lt;b class="minute" id="m"&gt;5&lt;/b&
JSP页面显示倒计时
lwj734114646的专栏
05-19 7474
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 标题页 //获取当前时间 startday=new Date(); clockStart=startday.getTime(); function initStopwatch(){ var myTime=ne
jsp实现获取验证码按钮（倒计时）
最新发布
吃黄瓜不蘸酱的博客
07-18 294
【代码】jsp实现获取验证码按钮（倒计时）
js+jsp页面，用定时器实现多个倒计时
Amor_1998的博客
10-10 874
【代码】js+jsp页面，用定时器实现多个倒计时。
jsp倒计时简单实现方法
01-08
本文实例讲述了jsp倒计时简单实现方法。分享给大家供大家参考，具体如下： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <% //当前时间毫秒数 Long current_time1=System.currentTimeMillis(); //结束时间毫秒数 Long end_time2=1337875200000l; //计算时间差 Long time2=end_time2-current_time1; //转换为秒数 int second=(int)(time2/1000)
jsp服务器时间倒计时完整实例源代码
12-19
之前做过倒计时的，但是都是基于jsp客户端的时间，找了多个资料没有找到jsp直接的获取服务器时间能运行的，这次专门做了一个，供初学者学习。
JSP中的倒数计时和自动跳转页面
01-08
老师说要写blog,然后只能把雪藏了多年没动过的博客重新翻出来了，今天先分享下JSP里的倒数计时和自动跳转页面 抓狂然后刚才好不容易码完，网页出错了。 1，在标签中建立onload事件，用作自动刷新； <body onload=shownum()> 2，在[removed]中编写onload事件： [removed] var i = 6; function shownum(){ i=i-1; document.getElementById(time)[removed]=i+秒后自动跳转登陆 界面; setTimeout('shownu
JSP获取服务器时间以倒计时的形式在页面显示
10-26
通过jsp获取服务器时间在页面以倒计时的形式显示，具体实现代码如下，感兴趣的朋友可以参考下
jsp 倒计时载入页面
05-03
倒计时载入页面 获取当前时间 时间以毫秒为单位 以倒计时方式显示时间
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 442
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
JSP界面简单倒计时实例
格林王子举哥
12-23 406
<body style="width:99.5%;overflow:hidden;background:#F7F7F7;"> <div id="timer" style="float:right;margin-top:-20px;margin-right:10px"></div> </body> <script> //界面倒计时...
Js时间倒计时
是个非常热爱生活、乐观、奋斗、努力的逗比青年
06-29 691
在JavaScript中，时间倒计时 下面代码会创建一个定时器，每秒钟更新一次倒计时，不是能难，记住关键字，运用关键字。好了，js实现倒计时，就写到这了，如果有不对的地方，希望多多指出，望与诸君共同进步！
倒计时jsp和js代码
07-14
好的，下面是一个简单的倒计时功能的 JSP 和 JavaScript 代码示例： 在 JSP 文件中： ```jsp <!DOCTYPE html> <html> <head> <title>倒计时示例</title> <script src="countdown.js"></script> </head> <body> <h1 id="countdown">倒计时: </h1> </body> </html> ``` 在 countdown.js 文件中： ```javascript window.onload = function() { // 设置倒计时结束时间（以毫秒为单位） var endTime = new Date("2022-01-01 00:00:00").getTime(); // 更新倒计时的函数 var updateCountdown = function() { var now = new Date().getTime(); // 计算剩余时间 var timeLeft = endTime - now; // 计算剩余的天、小时、分钟和秒 var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); // 更新页面上的倒计时 var countdownElement = document.getElementById("countdown"); countdownElement.innerHTML = "倒计时: " + days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒"; // 如果倒计时结束，则停止更新 if (timeLeft < 0) { clearInterval(countdownInterval); countdownElement.innerHTML = "倒计时结束!"; } }; // 每秒钟更新一次倒计时 var countdownInterval = setInterval(updateCountdown, 1000); }; ``` 以上代码会在页面上显示一个倒计时，直到指定的结束时间。你可以根据需要修改结束时间和页面布局等。希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一斤阳光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值