当前位置:首页 > 技术 > 代码 > 何谓“人生倒计时”

何谓“人生倒计时”

懋和道人1周前 (11-22)代码702

css部分

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}

div部分

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

js部分

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";    
}    
});

直接食用

扫描二维码推送至手机访问。

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

本文链接:https://www.lizhichen.cn/new/20221122131.shtml

分享给朋友:

“何谓“人生倒计时”” 的相关文章

网站标题及关键词地址随IP变化而变

网站标题及关键词地址随IP变化而变

有人问伍林堂官网的标题为什么在不同的地区显示不同的地址加名称,如下图:怎么变的?根据https://www.liuzhixi.cn/的提供方法如下:第一步:引入js<script sr...

云搜道前端编译

云搜道前端编译

后台api地址:/src/utils/request/index.tsconst instance = axios.create({   baseU...

所谓权限

所谓权限

面板删除文件会有chattr进程,这个chattr进程是用于设置文件特殊权限的,如何检查是否有防篡改的开启,lsattr命令可以看下文件特殊权限,chattr命令可以解除文件的特殊权限。lsattr用...

简单添加个“本站已经安全运行XX年XX天XX秒”教程

简单添加个“本站已经安全运行XX年XX天XX秒”教程

第一种第一步:在需要展示“本网站运行了XX年XX天XX秒”的地方,插进去:<span id="sitetime"></span>第二步:在插进去的...

评论列表

LINX
1周前 (11-23)

学到了,马上试试

懋和道人 IP:江苏省Google Chrome 107.0.0.0Windows 10 x64 回复:
没有案例,没工夫弄。
1周前 (11-23)

发表评论

访客

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