jsDate对象和倒计时图片案例
程序员文章站
2022-06-15 13:54:13
...
BOM的补充
1.复习
BOM：文档对象模型
重点 Document
2.补充Date对象
Date：日期；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date案例</title>
</head>
<body>
<script>
//之前讲js的时候,定义一个变量，都是使用var;
//如果大家是笔记本：F2+F12；台式机一般是F12；
// var name="张晨光";
// console.log(name);
//格式变了：var 变量名=new Date(),这时候date就是一个新的日期对象;
var date=new Date();
//console.log("今天的是日期时间："+date);
document.write("今天的是日期时间："+date);
//这个时间格式：它是老外的认同的时间格式；
//会在下面显示出来：今天的是日期时间：Sat May 09 2020 09:26:52 GMT+0800 (中国标准时间)
//下面我们要想看到具体的年 月 日；
//注意这时候得到年 √；月：
//月少了1，月的取值：0-11 ；第1个月：对应的数字是0；第2个月对应的数字是1；
//日：获取月中的某一天不是getDay(),getDay()它是获取一周的第几天；
//获取一个月的第几天；叫：getDate()
console.log("年："+date.getFullYear());
console.log("月:"+(date.getMonth()+1));
console.log("日:"+date.getDate());
console.log("时:"+date.getHours());
console.log("分:"+date.getMinutes());
console.log("秒:"+date.getSeconds());
document.write("<br/>**********************************<br/>");
document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+
date.getMinutes()+"分"+date.getSeconds()+"秒")
</script>
</body>
</html>
3.setTimeout()/setInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date案例</title>
</head>
<body>
<script>
//2.案例目标：时间自动变化；
//需要使用的系统函数setTimetout()/setInterval()
//setInterval(参数1，参数2);参数1：要调用的函数；参数2：自动毫秒时间间隔;单位是毫秒;
//setInterval('alert("KO")',1000);1秒=1000毫秒；
//显示的效果：每隔一秒，蹦出来一个弹框，里面显示KO。
//将目标分解；
//2.1 每隔1秒，自动刷新时间;
setInterval('refresh()',1000);
//2.2 定义一个函数refresh()
function refresh(){
//2.3将之前的显示年月日时分秒的时间代码放过来即可。
var date=new Date();
//问题是document.write();每次都会在页面显示。
//我们现在要让时间只显示一次；
/* document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+
date.getMinutes()+"分"+date.getSeconds()+"秒") */
//定义一个变量接受年月日时分秒等;
var now=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+
date.getMinutes()+"分"+date.getSeconds()+"秒";
//设置span这个上面显示的是now；
//这时候就需要先找到span;innerHTML:内部的内容
//这样span每次得到都是最新的值；
document.getElementById("clock").innerHTML=now;
}
</script>
<!--增加一个span,id叫clock时钟； -->
<span id="clock"></span>
</body>
</html>
4.炸弹案例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>炸弹案例一</title>
<style>
img{width:400px;height: 350px;}
</style>
<script>
//console.log(document.getElementById("bomb"));测试可以知道就是下面的img标签元素;
//之前是炸弹，3秒之后变成了骷髅;图片变成了骷髅;
function zha(){
//还是需要用的下一章的一个知识点;document.getElementById();
//通过id来找到某个文档的元素;
document.getElementById("bomb").src="img/2aa.jpg";
}
//2.定时器;参数1：函数；参数2：时间间隔;3000钟;
setInterval('zha()',3000);
</script>
</head>
<body>
<!-- 1.设计HTML页面 -->
<h1>定时器炸弹案例</h1>
<img src="img/boom.jpg" title="炸弹" id="bomb"/>
</body>
</html>
效果图：
5.炸弹案例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>炸弹案例一</title>
<style>
img{width:400px;height: 350px;}
span{font-size: 72px;font-weight: 400;color: red;}
</style>
<script>
//console.log(document.getElementById("bomb"));测试可以知道就是下面的img标签元素;
//之前是炸弹，3秒之后变成了骷髅;图片变成了骷髅;
function zha(){
//innerText:span里面的文本3可以显示出来；
var miao=document.getElementById("time").innerText;
miao=miao-1;
//到这个时候需要测试，一直显示的是2，为什么？？？
//console.log(miao); //结果是3-1=2，需要马上把这个2的值给span
document.getElementById("time").innerText=miao;
//这时候已经显示出来了
if(miao==0){
document.getElementById("bomb").src="img/2aa.jpg";
//清空时钟计时器shizhong;就不再计时了,取消倒计时变为负数的情况；.
clearInterval(shizhong);
}
}
//2.定时器;参数1：函数；参数2：时间间隔;3000钟;
var shizhong=setInterval('zha()',1000);
</script>
</head>
<body>
<!-- 1.设计HTML页面;之前不知道是3秒;可以看到3秒;3秒倒计时；如何办？？？
1分钟的时间来想如何办？？？倒计时的时候，时间间隔是多少呢？？？
要实现倒计时3 2 1，铁定时间间隔是1秒;
-->
<h1>定时器炸弹案例</h1>
<span id="time">3</span><br/>
<img src="img/boom.jpg" title="炸弹" id="bomb"/>
</body>
</html>
效果：
总结：
1.第一个知识点是Date对象的学习；js系统内置的自带对象，一般叫内置对象，主要是它的一些方法的使用，这些方法不用记，不会的时候，直接百度或者查js帮助手册。
2.setTimeout()/setInterval()函数的使用，函数的第一个参数是函数名(),第二个参数是时钟的时间间隔。
3.使用到了一个DOM的方法，document.getElemntById(id名)，通过元素的id来找到网页上的某个元素。
上一篇： Install Scala SBT