菜单

澳门金沙在线官网javascript贯彻倒计时并弹窗提示特效

2019年7月18日 - 金沙前端

在前端开拓中,难免会用到倒计时。如做的双十一活动,在距活动始于的半个月前须求做些宣传专业,需求告诉用户减价活动曾几何时开首。那一年将在用到倒计时,如在整站的某些页面提醒用户活动曾几何时初叶等。而在活动的末日,非常是在距活动甘休唯有1天左右时,就要动用弹窗倒计时。这一个倒计时设置在整站的首页顶端(当然也得以安装在别的地点,如首页正中等),并设置弹窗弹出10秒后自动消失,由用户决定是否点击到相应的位移页面,购买产品。

亟待的技能协助:CSS3,jQuery库;

HTML代码如下:

<section class="the_body">
  <div class="countdown">
    <h3>距中国雄于地球之日还有</h3>
    <div class="countdown_time">
     <i>0</i><i>3</i>
     <i class="date_text">天</i>
     <i>0</i><i>7</i>
     <i class="date_text">时</i>
     <i>4</i><i>7</i>
     <i class="date_text">分</i>
     <i>1</i><i>1</i>
     <i class="date_text">秒</i>
    </div>
  </div>
</section>

css代码如下:

.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}
.countdown{background:#ffec20;padding: 10px 0;}
.countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;}
.countdown .countdown_time{display:block;width:100%;text-align:center;}
.countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff;
margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight
:bold;}
.countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:1px;left:0;}
.countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:3px;left:0;}
.countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none;
border-bottom:none;text-decoration:none;padding: 0;}
.countdown .countdown_time .date_text:after{content:"";border:none;}
.countdown .countdown_time .date_text:before{content:"";border:none;}

JavaScript代码如下:

<script>
function remaintime() {
 var date = new Date("Jan 1,2015 00:00:00");//设置倒计时结束时间
 var nowdate = new Date();//获取当前日期
 var remaintime = date.getTime() - nowdate.getTime();//获取现在到倒计时结束时间的毫秒数
 var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//计算求得剩余天数
 var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//计算求得剩余小时数
 var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//计算求得剩余分钟数
 var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *
    1000 * 60) / (1000));//计算求得剩余秒数
 //当剩余天数小于10时,就在其前加一个0,以下剩余小时数、分钟数与秒数与此相同
 if (remainday < 10) {
  remainday = "0" + remainday;
 }else{remainday+="";
 //当剩余天数大于10时,剩余天数为数值,这是需要将该值转换为字符串,以下的剩余小时数、分钟数与秒数与此相同
}
 if (remainhour < 10) {
  remainhour = "0" + remainhour;
 }else{remainhour+="";}
 if (remainminute < 10) {
  remainminute = "0" + remainminute;
 }else{remainminute+="";}
 if (remainsecond < 10) {
  remainsecond = "0" + remainsecond;
 }else{remainsecond+="";}
 $(".the_days i:first-child").html(remainday.substr(0, 1));
 $(".the_days i:last-child").html(remainday.substr(1, 2));
 $(".the_hours i:first-child").html(remainhour.substr(0, 1));
 $(".the_hours i:last-child").html(remainhour.substr(1, 2));
 $(".the_minutes i:first-child").html(remainminute.substr(0, 1));
 $(".the_minutes i:last-child").html(remainminute.substr(1, 2));
 $(".the_seconds i:first-child").html(remainsecond.substr(0, 1));
 $(".the_seconds i:last-child").html(remainsecond.substr(1, 2));
 setTimeout("remaintime()",1000);//设置1秒后调用remaintime函数
}
remaintime();
setTimeout(function(){$(".countdown").hide();},10000);//在首页设置的弹窗效果,在分页这段代码可以不设置
</script>

那是自己本身写的倒计时效果,当然每一种人都足以依据自个儿的喜好,设置倒计时的意义。如您能够只展现“几天何时或多或少”,但个体感到未有设置到“几天曾几何时几分几秒”够气氛。这里的体裁也都得以依靠自个儿的喜好退换,但最后的功效都以构建活动开首前的盛暑氛围。

关于这里的html代码、css代码及JavaScript代码必要专注的也说下:

1.html代码就相当少说,首要就是怎么设置dom,以易于JavaScript操作;

2.css代码,这里根本用了:before与:after伪类,设置倒计时数值的立体效果;

3.JavaScript代码也是很简短的二个函数,这里你须求将得到的剩余时间调换为字符串,以便于字符串的截取显示等。其余,用setTimeout函数设置隔1秒试行二回函数,以动态显示剩余时间,当然也足以用setInterval函数,那五个函数设置的功力基本同样。

迄今结束,一个大约的倒计时效果就做出来了。假诺要在首页设置弹窗倒计时,你可以把背景设置的更炫彩一点,那样能够吸援引户点击,并安装10秒后弹窗自动消失(可能设置二个平息按键等)。

倒计时的兑现能够有很三种办法,在那边也就先介绍这一种,以往不时光将会持续计算。

金沙js55 ,以上所述就是本文的全体内容了,希望能够对大家精晓javascript有所支持。

您也许感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图