第1关：限时秒杀效果图片渲染

图1如下链接为https://data.educoder.net/api/attachments/2089667

图2如下链接为https://data.educoder.net/api/attachments/2089666

编程要求

根据提示，在右侧编辑器补充代码。要求使用指定的两张图片已经给出图片对应的url 要求设置图片的宽度为702px 图片高度378px 背景图url(https://data.educoder.net/api/attachments/2089667)

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>限时秒杀</title>
<style type="text/css">
/*全局控制*/
body{font-size:20px; color:#fff; font-family: microsoft yahei,arial;}
/*清除浏览器默认样式*/
img{list-style:none; outline:none;}
.img-box{
position:relative;
/* ********* Begin ********* */
width:702px;
height:378px;
background:url(https://www.educoder.net/api/attachments/2089667);
/* ********* End ********* */
margin:0 auto;
}
.img-box span{
position:relative;
text-align:center;
line-height:26px;
margin:4px 0 0;
}
.img-box #hour{
left:50.6%;
top:68.35%
}
.img-box #munite{
left:55.2%;
top:68.35%;
}
.img-box #second{
left:59.6%;
top:68.35%;
}
#bot-box{
position:absolute;
z-index:1;
top:250px;
display:none;
width:702px;
height:51px;
line-height:40px;
text-align:center;
color:#666;
font-size:28px;
}
</style>
</head>
<body>
<div class="img-box">                         <!--设置秒杀时间块--><span id="hour"></span><span id="munite"></span><span id="second"></span><div id="bot-box"></div>                <!--设置限时秒杀结束块-->
</div>
</body>
</html>

第2关：限时秒杀效果javascript训练

编程要求

根据提示，在右侧编辑器补充代码。需要向时分秒对应的标签中插入时间值注：同学们在练习时注意修改endtime 当endtime 与当前时间距离不到24小时限时秒杀动态效果最好如果同学们不修改endtime 会静态显示秒杀结束画面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>限时秒杀</title>
<style type="text/css">
/*全局控制*/
body{font-size:20px; color:#fff; font-family: microsoft yahei,arial;}
/*清除浏览器默认样式*/
img{list-style:none; outline:none;}
.img-box{
position:relative;
background:url(https://www.educoder.net/api/attachments/2089667);
width:702px;
height:378px;
margin:0 auto;
}
.img-box span{
position:relative;
text-align:center;
line-height:26px;
margin:4px 0 0;
}
.img-box #hour{
left:50.6%;
top:68.35%
}
.img-box #munite{
left:55.2%;
top:68.35%;
}
.img-box #second{
left:59.6%;
top:68.35%;
}
#bot-box{
position:absolute;
z-index:1;
top:250px;
display:none;
width:702px;
height:51px;
line-height:40px;
text-align:center;
color:#666;
font-size:28px;
}
</style>
</head>
<body onload="fresh()">
<div class="img-box">                         <!--设置秒杀时间块--><span id="hour"></span><span id="munite"></span><span id="second"></span><div id="bot-box"></div>                <!--设置限时秒杀结束块-->
</div>
<script type="text/javascript">
function fresh()
{//设置秒杀结束时间,同学们设置相对时间为24小时以内 javascript加载效果最佳 // 如果同学们不修改此处时间会导致判断结果为秒杀结束var endtime=new Date("2022/6/18,01:01:01");//获取当前时间 当前时间变量为var nowtime/* *************start***************** */var nowtime = new Date();/* *************End***************** *///计算剩余秒杀时间，单位为秒var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000);h=parseInt(leftsecond/3600);//计算剩余小时m=parseInt((leftsecond/60)%60); //计算剩余分钟s=parseInt(leftsecond%60); //计算剩余秒if(h<10) h= "0"+h;if(m<10 && m>=0) m= "0"+m; else if(m<0) m="00";if(s<10 && s>=0) s= "0"+s; else if(s<0) s="00";//向html中插入时分秒 使用id:hour munite second/* *************start***************** */document.getElementById("hour").innerHTML=h;document.getElementById("munite").innerHTML=m;document.getElementById("second").innerHTML=s;/* *************End***************** *///判断秒杀是否结束，结束则输出相应提示信息if(leftsecond<=0){document.getElementById("bot-box").style.display="block";document.getElementById("bot-box").style.background="url(https://www.educoder.net/api/attachments/2089666) no-repeat";//向html中插入”秒杀已结束“提醒/* *************start***************** */if(leftsecond<=0){document.getElementById("bot-box").style.display="block";document.getElementById("bot-box").style.background="url(https://www.educoder.net/api/attachments/2089666) no-repeat";document.getElementById("bot-box").innerHTML="秒杀已结束";}/* *************End***************** */clearInterval(sh);}
}
//设计倒计时
var sh=setInterval(fresh,1000);
</script>
</body>
</html>

Web综合应用案例-限时秒杀效果的制作相关推荐

educoder头歌Web实训 web课——综合应用案例：限时秒杀效果的制作
educoder头歌Web实训太原理工web课--综合应用案例:动态焦点图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:限时秒杀效果图片渲染 [TOC] 图1如下链接为htt ...
web综合限时秒杀效果的制作
第1关:限时秒杀效果图片渲染 TOC] 图1如下链接为https://www.educoder.net/api/attachments/2089667 图2如下链接为https://www.edu ...
web前端-综合应用案例-简历表页面的制作-educoder
第1关:简历表页面的结构设计 <!doctype html> <html> <head> <meta charset="utf-8"> ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
educoder头歌Web实训 web课——综合应用案例：动态焦点图页面的制作
educoder头歌Web实训太原理工web课--综合应用案例:拼图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:动态焦点图页面的样式设计任务描述本关任务: 完成动态焦点图 ...
限时秒杀的整体代码在html中,限时秒杀.html
限时秒杀 .box{margin:0 auto;position:relative;background:url(images/flash_sale.png);width:702px;height:3 ...
【JavaScript实训】-- 限时秒杀
这道题是我在上js课程的时候,老师临时给我们出的一道题,虽然说这种小练习之前也要写过相关代码,但好像把它综合到一起,我就蒙圈了,哎~ 实现页面: 目录一.实现步骤详解: 1.设置秒杀结束时间 2.声 ...
JavaScript限时秒杀
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例
预览效果图: 使用到的知识点: 定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码取消定时器 clearInterval:取消由setInterval设置的定时器 ...

Web综合应用案例-限时秒杀效果的制作

第1关：限时秒杀效果图片渲染

编程要求

第2关：限时秒杀效果javascript训练

Web综合应用案例-限时秒杀效果的制作相关推荐

最新文章

热门文章