本文是《免费(共164篇)》专题的第 150 篇。阅读本文前,您可以先阅读前面的一些文章:
美化图:
教程:
外观小工具,插入侧边栏自定义HTML,代码如下
<div class="srot-mine b2-radius" style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);">
<i class="srot-mine-bg 0"></i>
<div class="sort-mine-wrap"><div class="srot-mine-tit"><img src="/pic/vipiconhover.svg" alt="" class="srot-mine-ava"> <span>会员限时折扣</span></div> <div class="timer"><ul class="timer__content">
<li class="timer__item"><p id="_d_mc" class="timer__name">天</p><span id="_d" class="timer__number">08</span></li>
<li class="timer__item"><p id="_h_mc" class="timer__name">时</p><span id="_h" class="timer__number">07</span></li>
<li class="timer__item"><p id="_m_mc" class="timer__name">分</p><span id="_m" class="timer__number">22</span></li>
<li class="timer__item"><p id="_s_mc" class="timer__name">秒</p><span id="_s" class="timer__number">51</span></li>
</ul> <a href="/vips" class="timer_btn" target="_blank">
会员限时折扣
</a></div></div>
</div>
<style>
.srot-mine {
position: relative;
width: 376px;
background-image: linear-gradient(to top,#9be15d 0%,#00e3ae 100%);
height: 180px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
}
.srot-mine {
width: 100%;
z-index: 2;
margin-right: -5px;
}
.srot-mine-bg {
position: absolute;
top: 45px;
right: 0px;
width: 118px;
height: 78px;
}
.sort-mine-wrap {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
padding: 12px 16px 15px;
}
.srot-mine-tit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 25px;
}
.sort-mine-wrap img {
display: flex;
width: auto;
}
.srot-mine-ava {
width: 20px;
height: 20px;
border-radius: 50%;
}
.srot-mine-tit>span {
margin-left: 9px;
font-size: 15px;
font-weight: 600;
color: #613c14;
}
.timer {
z-index: 1;
color: white;
transform: translateY(0px);
user-select: none;
}
.timer__content {
display: flex;
margin-top: 20px;
}
.timer ul li{
padding:unset;
margin-top:-8px!important;
}
.timer__item:nth-child(1) {
animation-delay: 0.2s;
}
.timer__item {
display: flex;
width: 25%;
color: #f35;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 10px;
animation: item 0.6s ease backwards;
position: relative;
transition: all 1s 0.2s ease;
}
.timer__item:nth-child(2) {
animation-delay: 0.4s;
}
.timer__item:nth-child(3) {
animation-delay: 0.6s;
}
.timer__item:nth-child(4) {
animation-delay: 0.8s;
}
.timer_btn {
border: 0!important;
}
.timer_btn {
position: relative;
width: 152px;
height: 32px;
background-image: linear-gradient(134deg,#4d5580,#3d4466);
font-size: 14px;
color: #fff3eb;
font-weight: 600;
margin-top: 20px;
margin: 20px auto 0px auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.timer_btn .timer_btn_jb {
top: -14px;
right: -54px;
position: absolute;
background-image: linear-gradient(90deg,#ff9580,#f36);
border-radius: 6px;
color: #fff;
letter-spacing: 0;
text-align: center;
font-weight: 100;
padding: 2px 8px;
font-size: 20px;
-webkit-transform: scale(.5);
transform: scale(.5);
}
.timer__item:before {
width: calc(100% - 5px);
height: 60px;
content: "";
position: absolute;
bottom: 0;
backdrop-filter: blur(5px);
z-index: -1;
border-radius: 10px;
background-color: #ffffff87;
backdrop-filter: blur(10px);
align-items: center;
box-shadow: 0 3px 4px 0 rgba(0,0,0,0.2), inset 2px 4px 0 0 rgba(255,255,255,0.08);
}
.timer__name {
color: #E91E63;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
bottom: 5px;
right: 12px;
position: absolute;
line-height: 13px;
text-align: center;
letter-spacing: 0.1em;
font-family: "Barlow Semi Condensed",sans-serif;
}
.timer__number {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 30px;
text-align: center;
letter-spacing: 2px;
animation: number 0.4s 1.4s ease backwards;
}
</style>
<script type="text/javascript">
//设置定时器容器
var countDownTimer = null ;
//获取元素
var day = document.getElementById("_d");
var hour = document.getElementById("_h");
var minute = document.getElementById("_m");
var second = document.getElementById("_s");
//获取截止时间的时间戳(单位毫秒)
var str = "2024/1/1 00:00:00"
var inputTime = +new Date(str);
//我们先调用countDown函数,可以避免在打开界面后停一秒后才开始倒计时
if(day && hour && minute && second) {
countDown();
}
//定时器 每隔一秒变化一次
countDownTimer = setInterval(countDown, 1000);
function countDown() {
//获取当前时间的时间戳(单位毫秒)
var nowTime = +new Date();
//把剩余时间毫秒数转化为秒
var times = (inputTime - nowTime) / 1000;
if(times > 0){
//计算天数
var d = Math.floor(times/60/60/24)
if(day){
day.innerHTML = d
//如果小时数小于 10,要变成 0 + 数字的形式 赋值给盒子
day.innerHTML = d < 10 ? "0" + d : d;
}
//计算小时数 转化为整数
var h = parseInt(times / 60 / 60 % 24);
//如果小时数小于 10,要变成 0 + 数字的形式 赋值给盒子
if(hour){
hour.innerHTML = h < 10 ? "0" + h : h;
}
//计算分钟数 转化为整数
var m = parseInt(times / 60 % 60);
//如果分钟数小于 10,要变成 0 + 数字的形式 赋值给盒子
if(minute){
minute.innerHTML = m < 10 ? "0" + m : m;
}
//计算描述 转化为整数
var s = parseInt(times % 60);
//如果秒钟数小于 10,要变成 0 + 数字的形式 赋值给盒子
if(second){
second.innerHTML = s < 10 ? "0" + s : s;
}
}else{
// 停止定时器,清空定时器
clearInterval(countDownTimer)
}
}
</script>
您已阅读完《免费(共164篇)》专题的第 150 篇。您可以继续阅读该专题下面的其它文章: