倒计时html源码

最新推荐文章于 2024-04-10 11:34:31 发布
最新推荐文章于 2024-04-10 11:34:31 发布
阅读量1.4k 收藏 5
点赞数 1
文章标签： html 实时互动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43648852/article/details/126928853
版权

文章目录

倒计时html源码

<html>
<head>
<meta charset="UTF-8">
<title>人生倒计时</title>
<style> 
body{background:linear-gradient(to right,#9796f0,#fbc7d4);color:#333;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Muli';height:100vh;margin:0}.reviews-container{background-color:#fff;border-radius:5px;box-shadow:0 3px 10px -5px rgba(0,0,0,0.3);padding:20px}.review{color:#777;padding:10px 10px 20px 10px;font-size:14px}.progress{background-color:rgba(100,100,100,0.2);border-radius:5px;position:relative;height:10px;width:200px;margin-right:50px;margin-top:10px}.progress-done{background:linear-gradient(to left,#f2709c,#ff9472);box-shadow:0 3px 3px -5px #f2709c,0 2px 5px #f2709c;border-radius:5px;height:10px;transition:width 2s ease .3s;animation:barberpole 9s linear infinite;background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:40px 40px}@keyframes barberpole{from{background-position:0 0}to{background-position:500px 0}}.percent{color:#333;float:right;margin-top:-14px}.social-panel-container{position:fixed;right:0;bottom:80px;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-10px)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,0.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}
</style>

</head>
<body>

<div class="reviews-container">
    <h2>人生倒计时</h2>
    <div class="review time">
        <span class="icon-container"></span>
        <div class="progress">
            <div class="progress-done" data-done=""></div>
        </div>
        <span class="percent"></span>
    </div>
    <div class="review week">
        <span class="icon-container"></span>
        <div class="progress">
            <div class="progress-done" data-done=""></div>
        </div>
        <span class="percent"></span>
    </div>
    <div class="review month">
        <span class="icon-container"></span>
        <div class="progress">
            <div class="progress-done" data-done=""></div>
        </div>
        <span class="percent"></span>
    </div>
    <div class="review year">
        <span class="icon-container"></span>
        <div class="progress">
            <div class="progress-done" data-done=""></div>
        </div>
        <span class="percent"></span>
    </div>
    <div class="review festival">
        <span class="icon-container"></span>
        <div class="progress">
            <div class="progress-done" data-done=""></div>
        </div>
        <span class="percent"></span>
    </div> 
</div>

<script>
const hh = new Date().getHours(),mm = new Date().getMinutes(),hhmmt = hh + '.' + mm;
document.querySelector('.time .icon-container').innerText = '今天已过去 ' + hh + ' 小时';
document.querySelector('.time .progress-done').setAttribute("data-done", parseInt(hhmmt/24*100));
document.querySelector('.time .percent').innerText = parseInt(hhmmt/24*100) + '%';

dd = new Date().getDay();
if(dd==0){dd=7};
document.querySelector('.week .icon-container').innerText = '本周已过去 ' + dd + ' 天';
document.querySelector('.week .progress-done').setAttribute("data-done", parseInt(dd/7*100));
document.querySelector('.week .percent').innerText = parseInt(dd/7*100) + '%'; 
  
const md = new Date().getDate(),months = new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getDate();
document.querySelector('.month .icon-container').innerText = '本月已过去 ' + md + ' 天';
document.querySelector('.month .progress-done').setAttribute("data-done", parseInt(md/months*100));
document.querySelector('.month .percent').innerText = parseInt(md/months*100) + '%'; 

const yy = new Date().getMonth();
document.querySelector('.year .icon-container').innerText = '今年已过去 ' + yy + ' 个月 零 ' + md +  ' 天';
document.querySelector('.year .progress-done').setAttribute("data-done", parseInt(yy/12*100));
document.querySelector('.year .percent').innerText = parseInt(yy/12*100) + '%'; 
  
const d1="2023/01/22 00:00:00";
const dateBegin = new Date(d1);
const dateEnd = new Date();
const dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
const leave1=dateDiff%(24*3600*1000)    //计算天数后剩余的毫秒数
const hours=Math.floor(leave1/(3600*1000))//计算出小时数
const  dayDifft = 365+dayDiff;
document.querySelector('.festival .icon-container').innerText = '离春节还有' + Math.abs(dayDiff) + '天' +Math.abs(hours)+'时';
document.querySelector('.festival .progress-done').setAttribute("data-done", parseInt(dayDifft/365*100));
document.querySelector('.festival .percent').innerText = parseInt(dayDifft/365*100) + '%';
const progressDone = document.querySelectorAll('.progress-done');
progressDone.forEach(progress => {
    progress.style.width = progress.getAttribute('data-done') + '%';
    if(progress.getAttribute('data-done')<=100 && progress.getAttribute('data-done')>80){
      progress.style.backgroundColor = "#d9534f";
      progress.style.boxShadow = "-2px 2px 5px 0px #d9534f";
    }
    if(progress.getAttribute('data-done')<=80 && progress.getAttribute('data-done')>60){
      progress.style.backgroundColor = "#f0ad4e";
      progress.style.boxShadow = "-2px 2px 5px 0px #f0ad4e";
    }
    if(progress.getAttribute('data-done')<=60 && progress.getAttribute('data-done')>40){
      progress.style.backgroundColor = "#5bc0de";
      progress.style.boxShadow = "-2px 2px 5px 0px #5bc0de";
    }
    if(progress.getAttribute('data-done')<=40 && progress.getAttribute('data-done')>20){
      progress.style.backgroundColor = "#5cb85c";
      progress.style.boxShadow = "-2px 2px 5px 0px #5cb85c";
    }
    if(progress.getAttribute('data-done')<=20 && progress.getAttribute('data-done')>=0){
      progress.style.backgroundColor = "#5cb85c";
      progress.style.boxShadow = "-2px 2px 5px 0px #5cb85c";
    }
    
});
</script>
</body>
</html>

效果展示

yueseman
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
JavaScript实现倒计时（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-23 728
JavaScript实现倒计时（附完整源码）
js实现html页面倒计30秒,javascript实现简单页面倒计时
weixin_39710003的博客
06-08 845
本文实例为大家分享了javascript实现简单页面倒计时的具体代码，供大家参考，具体内容如下话不多说，直接贴代码body{color:red;text-align: center;}.one{color:black;text-align:center;}日期倒计时请输入目标日期并点击按钮，实现目标日期的倒计时！年月日时分秒function getdate(clock){var now=new D...
一个简单的2024龙年倒计时页面HTML源码
rhefd的博客
02-07 269
预览如下，复制粘贴下面的代码，另存为html文件即可打开，文字链接都可以更改，把文件名修改成html就可以访问使用了！
HTML网页版倒数日·Days Matter
最新发布
weixin_51831991的博客
04-10 2338
HTML+CSS+JS原生代码实现的网页版倒数日·Days Matter
H5(Html)倒计时
weixin_42636075的博客
03-10 495
H5(Html)倒计时 html实现倒计时 html倒计时
超好看倒计时特效单页HTML模板源码分享
rethj的博客
08-12 879
超好看倒计时特效单页HTML模板源码，超好看的苍穹倒计时特效单页HTML模板，页面挺简约蛮好看的，有需要的可以自行去体验吧。使用简单，将下载源码解压到服务器，修改主要文件，即可打开使用了。......
html实现倒计时功能、暂定、继续、重置
IamMXF的博客
05-15 763
开启</button></div><div><button id="stop" class="comstyle">暂停</button></div>/*传过来的形式參数time不要使用this，而其余在本函数使用的变量则必须使用this*/<div><button id="nextOne">下一个人剩余时间：</br>
跨年倒计时HTML源码
06-21
在这个名为"跨年倒计时HTML源码"的项目中，我们可以看到一个利用HTML来实现的新年倒计时功能，同时还结合了视觉特效——雪花飘落效果，这为网页增添了一种节日氛围。 首先，让我们关注HTML部分。HTML源码通常由一...
倒计时2023元旦倒计时HTML代码
12-08
【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 ...
2024跨年倒计时html代码（跨年倒计时html代码2024）
01-22
2024跨年倒计时html代码（跨年倒计时html代码2024） 效果演示https://www.denghongyuan.com/html/chunjie/ 倒计时结束时间：2024-02-10 00:00:00 顺计时开始时间：2024-02-10 23:59:59 提示：2024年春节时间是2024年...
2023年新年倒计时html源码
12-11
2023年新年倒计时html源码
倒计时.html
09-20
倒计时简单制作，思路是利用思路：获取结束的时间-当前的时间>0，本资源好理解，便于学习
计时器源码.zip
07-18
MFC对话框，计时器源码，可计时，可暂停
html5圆形倒计时器设置怀孕周期倒计时器代码
11-10
html5圆形倒计时器设置怀孕周期倒计时器代码 html5圆形倒计时器设置怀孕周期倒计时器代码 html5圆形倒计时器设置怀孕周期倒计时器代码
二进制炫酷时钟计时器HTML源码
12-10
二进制炫酷时钟计时器HTML源码
元旦倒计时Html代码
12-18
元旦倒计时
春节倒计时源码
web17886480312的博客
02-23 1428
效果图： 多少是有点粗工滥制了，当天晚上想都没想疯狂div，唉~ 为了方便观看，所以把三部分代码分开了 Code： JS实现倒计时的代码： <script type="text/javascript"> //window加载完毕后执行函数体 window.onload=function(){ //编写倒计时函数 function countdown(){ //初始化日期变量 var target_time=n
倒计时主页源码
极乐数据
10-03 308
倒计时主页源码内有教程 已测试。
html+css+js制作时间倒计时（时分秒）简易版
加油！
11-14 2769
html+css+js制作时间倒计时（时分秒）简易版
跨年倒计时html代码
11-19
以下是一个简单的跨年倒计时HTML代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跨年倒计时</title> </head> <body> <h1>距离新年还有：</h1> <div id="countdown"></div> <script> // 设置倒计时结束时间 var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime(); // 每秒更新倒计时 var x = setInterval(function() { // 获取当前时间 var now = new Date().getTime(); // 计算距离结束时间还有多久 var distance = countDownDate - now; // 计算剩余时间的天、小时、分钟和秒数 var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 将剩余时间显示在页面上 document.getElementById("countdown").innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 "; // 如果倒计时结束，显示提示信息 if (distance < 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "跨年啦！"; } }, 1000); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

yueseman

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

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

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

打赏作者

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

抵扣说明：

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

余额充值