educoder头歌Web实训 太原理工web课——综合应用案例:限时秒杀效果的制作全网更新最快

Posted 玛卡巴卡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了educoder头歌Web实训 太原理工web课——综合应用案例:限时秒杀效果的制作全网更新最快相关的知识,希望对你有一定的参考价值。

educoder头歌Web实训 太原理工web课——综合应用案例:动态焦点图页面的制作【全网更新最快】_玛卡巴卡的博客-CSDN博客

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

[TOC] 图1如下 链接为https://www.educoder.net/api/attachments/2089667

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


任务描述

本关任务:完成限时秒杀效果图的图片渲染,

相关知识

为了完成本关任务,你需要掌握:1.DOM树,2.对象,3.数据类型4Date对象。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>限时秒杀</title>
<style type="text/css">
/*全局控制*/
bodyfont-size:20px; color:#fff; font-family: microsoft yahei,arial;
/*清除浏览器默认样式*/
imglist-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训练

任务描述

本关任务:创建Date对象,向题中说明的对象插值。

相关知识

为了完成本关任务,你需要掌握:如何向指定标签中插值

如何向指定标签中插值

HTML DOM innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>限时秒杀</title>
<style type="text/css">
/*全局控制*/
bodyfont-size:20px; color:#fff; font-family: microsoft yahei,arial;
/*清除浏览器默认样式*/
imglist-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("2020/1/1,01:01:01");
    //获取当前时间
    var nowtime = new Date();
    //计算剩余秒杀时间,单位为秒
    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";
    document.getElementById("hour").innerHTML=h;
    document.getElementById("munite").innerHTML=m;
    document.getElementById("second").innerHTML=s;
    //判断秒杀是否结束,结束则输出相应提示信息
    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="秒杀已结束";
        clearInterval(sh);
    

//设计倒计时
var sh=setInterval(fresh,1000);
</script>
</body>
</html>

以上是关于educoder头歌Web实训 太原理工web课——综合应用案例:限时秒杀效果的制作全网更新最快的主要内容,如果未能解决你的问题,请参考以下文章

educoder头歌Web实训 太原理工web课——综合应用案例:商城下拉菜单的制作[全网更新最快]

educoder头歌实训 太原理工大学web课程————JavaScript对象:数组

educoder头歌实训 太原理工大学web课程————JavaScript对象:Math日期

educoder(头歌)平台Java实训作业答案

头歌(Educoder)实践教学平台——Hive综合应用案例

JavaScript上部分--头歌(educoder)实训作业题目及答案