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

- 日理万妓 2023-09-30 18:00 21阅读 0赞

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

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

![4257cc30b506c56a7d8718e8583ce023.png][]

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

--------------------

#### 编程要求 ####

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

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

[https_data.educoder.net_api_attachments_2089667]: https://data.educoder.net/api/attachments/2089667
[4257cc30b506c56a7d8718e8583ce023.png]: https://img-blog.csdnimg.cn/img_convert/4257cc30b506c56a7d8718e8583ce023.png
[https_data.educoder.net_api_attachments_2089666]: https://data.educoder.net/api/attachments/2089666