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">
/*全局控制*/
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训练
任务描述
本关任务:创建Date对象,向题中说明的对象插值。
相关知识
为了完成本关任务,你需要掌握:如何向指定标签中插值
如何向指定标签中插值
HTML DOM innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML
<!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("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课——综合应用案例:限时秒杀效果的制作相关推荐
- Web综合应用案例-限时秒杀效果的制作
第1关:限时秒杀效果图片渲染 图1如下 链接为https://data.educoder.net/api/attachments/2089667 图2如下 链接为https://data.educod ...
- Educoder/头歌JAVA实训——JAVA面向对象:类与对象
第1关:什么是类,如何创建类 什么是类 类:类是一个模板,它描述一类对象的行为和属性. 对象:对象是类的一个实例,有 属性 和 行为 . 举个例子: 人是一个 "类",小明就是人的 ...
- educoder头歌Web实训 web课——综合应用案例:动态焦点图页面的制作
educoder头歌Web实训 太原理工web课--综合应用案例:拼图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客 第1关:动态焦点图页面的样式设计 任务描述 本关任务: 完成动态焦点图 ...
- web综合 限时秒杀效果的制作
第1关:限时秒杀效果图片渲染 TOC] 图1如下 链接为https://www.educoder.net/api/attachments/2089667 图2如下 链接为https://www.edu ...
- 头歌HTML实训笔录
头歌实训笔录 HTML前端基础 第2关 创建 - 标签 HTML前端基础 因学校Java 前端等写代码的作业都在头哥平台上操作,就记录一下每一关的代码吧.. ##第1关 创建第一个 HTML 标签 / ...
- 头歌 Java实训答案 全ac代码 请善用目录功能
Java初体验 第一关 public class HelloWorld{ /********* Begin *********/ public static void main(String[] ar ...
- 头歌Java实训答案——Java初体验
第1关:Java第一课 public class HelloWorld{/********* Begin *********/public static void main(String[] args ...
- 头歌Python实训答案——函数结构
第1关:函数的参数 - 搭建函数房子的砖 编程要求 本关的编程任务是补全src/Step1/plus.py文件的代码,实现相应的功能.具体要求如下: 定义并调用一个函数,功能是对输入的列表中的数值元素 ...
- educoder头歌实训 web课——JavaScript语言基础:JS循环语句
educoder头歌实训 太原理工大学web课程----JavaScript语法基础:JS运算符_玛卡巴卡的博客-CSDN博客 第1关:while类型 任务描述 质数的定义如下:大于1的自然数,且除 ...
最新文章
- USACO 1.0_Greedy Gift Givers
- Linux中listen()系统调用的backlog参数分析
- CRF算法中辅助概念 团 极大团 最大团
- 过早扩张、未经检验的技术,创业公司最易跳入哪些致命陷阱?
- PhpStorm+Homestead+Xdebug调试Laravel
- DotNet Framework 版本历史
- BASISI系统中如何配置web service
- android 枚举类型比较大小写,Spring 3.0 MVC绑定枚举区分大小写
- 【APICloud系列|34】免费使用的ChromeDebug 模块
- try、catch和finally中都有return语句的情况
- android alsa,android下alsa驱动alsa_arecord录音问题
- 有关ArrayList增加Map引发的一个BUG
- 608. 两数和-输入已排序的数组
- 基于asp.net的企业固定资产管理系统
- mysql pxc 原理_mysql PXC配置
- 小微个人网站如何接入免费短信验证码
- persevere的用法_persevere和persist和insist的区别是什么?
- Java第十一章总结
- Golang 字符串拼接
- 360众测重装上阵,创新服务模式重塑众测新业态
热门文章
- 计算器算贝塞尔公式_【3D与图形计算器的相遇】论一个3d画图软件的在计算器上的诞生...
- jframe的简单用法
- Java之构造函数 翔细开VAP.
- 教师回乡当“鸡倌”,创立合作社收入达20多万
- mysql主从和canal_MySQL协议和canal实现
- 账户系统如何应对高并发、热点账户等问题
- 标题隐藏_平静的标题下隐藏着不平静的天气,敢不敢点开?
- 计算机主机控制器,可扩展主机控制器接口
- CUDA|并行计算优化策略
- eureka 服务注册发现demo