当前位置:首页 > 技术博客 > HTML > 人生倒计时HTML源码

人生倒计时HTML源码

4年前 (2021-10-10)HTML2208

灵感来源于一个叫Joe的emlog主题,强调一下:只是灵感抄袭,代码绝对没有任何抄袭!

补充:Joe的主题我也不太确定是哪个程序的原创主题

<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>


有个朋友想让我把上面的javascript部分用另一种方式重写一下(思路可能不太符合他胃口),今天来补一下

  let NewDate = new Date(),Year = NewDate.getFullYear(),hh = NewDate.getHours(),mm = NewDate.getMinutes(),hhmmt = hh + '.' + mm,
      dd = NewDate.getDay(),md = NewDate.getDate(),
      months = new Date(NewDate.getFullYear(), NewDate.getMonth()+1, 0).getDate(),
      yy = NewDate.getMonth(),d1="2023/01/22 00:00:00",dateBegin = new Date(d1),dateDiff = NewDate.getTime() - dateBegin.getTime(),dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)),leave1=dateDiff%(24*3600*1000),hours=Math.floor(leave1/(3600*1000)),dayDifft = 365+dayDiff,allreviews = document.querySelectorAll('.review');  if(dd==0){dd=7}
  let reviewsTexts = [
      {
        title:'今天已过去 ' + hh + ' 小时',
        data_done:parseInt(hhmmt/24*100)
      },
      {
        title:'本周已过去 ' + dd + ' 天',
        data_done:parseInt(dd/7*100)
      },
      {
        title:'本月已过去 ' + md +  ' 天',
        data_done:parseInt(md/months*100)
      },
      {
        title:'今年已过去 ' + yy + ' 个月 零 ' + md +  ' 天',
        data_done:parseInt(yy/12*100)
      },
      {
        title:'距' + (Year+1) + '年春节还剩 ' + Math.abs(dayDiff) + ' 天 ' + Math.abs(hours)+' 小时',
        data_done:parseInt(dayDifft/365*100)
      }
  ];
    allreviews.forEach((review, i) => { const { title, data_done } = reviewsTexts[i];
    // 缓存元素 
    const iconContainer = review.querySelector(".icon-container");
    const percentElement = review.querySelector(".percent");
    const progressDone = review.querySelector(".progress-done");
    // 更新文本内容 
    iconContainer.innerText = title;
    percentElement.innerText = data_done + '%';
    progressDone.style.width = data_done + '%';
    // 选择颜色 
    let color;
    if (data_done > 80) { color = '#d9534f';} else 
    if (data_done > 60) { color = '#f0ad4e';} else 
    if (data_done > 40) { color = '#5bc0de';} else 
    { color = '#5cb85c';}
    // 更新进度条样式 
    progressDone.style.backgroundColor = color;
    progressDone.style.boxShadow = `0px 2px 5px 0px ${color}`; });

可以理解为代码简化,如果也想用这个版本的话,就用这里面的代码全部替换原来的javascript代码就可以了,其他html和css部分不变。

更新日志

2022-02-28  优化:自动获取当前年份

2021-12-12  优化:对剩余月份的准确度修改

2021-10-31  优化:对日期的判断优化,更简洁的代码处理(网友给的建议)

2021-10-29  新增:javascript部分新增另外一个种写法(其他部分不变)

2021-10-24  修复:一个小bug

2021-10-23  新增:根据进度条的百分比调整对应的颜色(有四种颜色)

QQ截图20211023203258.png

版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/185.html

标签: HTMLCSS

相关文章

产品分类图片列表tab切换特效

产品分类图片列表tab切换特效

jQuery制作简洁的产品分类图片列表tab布局,带标题和分类菜单的图文列表选项卡切换特效。...

web设计互联网公司网站模板

web设计互联网公司网站模板

一款现代化创意的多用途网页设计公司网站HTML模板。使用bootstrap构建,响应式布局。它适用于所有网络代理机构,网页设计公司,网页设计师,数字营销或任何类...

React垂直手风琴收缩展示特效

React垂直手风琴收缩展示特效

基于React dom制作简洁黑色的垂直手风琴菜单收缩内容展示,支持滑动和多个菜单收缩展开效果,通过js获取标题和内容,直接修改文本即可使用。下载链接: htt...

网页坦克大战

网页坦克大战

经典90版html5坦克大战游戏+源码。操作说明:玩家1:wasd上左下右,space射击;玩家2:方向键,enter射击。n下一关,p上一关。下载链接: ht...

3D炫酷元素周期表源码

3D炫酷元素周期表源码

3D 超炫 化学周期表 可改作信息栏 导航图 以及图片墙! 左键旋转 滚轮缩放 右键移动下载链接: https://pan.baidu.com/s/1aHJI-...

庆祝建党100周年给网站加个喜庆的横幅

庆祝建党100周年给网站加个喜庆的横幅

<style> /*当屏幕分辨率小于1063是就隐藏*/     @media only&nb...

评论列表

懋和道人
懋和道人
9个月前 (09-17)

cURL error 22: The requested URL returned error: 403 Forbidden [https://www.liuzhixi.cn/feed.php]
我不好获取你的feed.php,你给我弄个权限

112233
112233
10个月前 (09-05)

代码乱码了哦

admin 回复:
你自己把代码里面的年月日改一下就好了
10个月前 (09-07)
爱软资源网
4年前 (2021-10-10)

支持一下 joe应该是typecho的主题 emlog也是仿的

admin 回复:
好吧,长知识了
4年前 (2021-10-10)

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。