一、本课目标
- 掌握Date对象的使用
-
掌握Math对象的使用
image.png
二、Date对象
语法：
var 日期对象 = new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss
image.png
上面第一个是返回当前日期和时间，第二个是给了一个指定的时间。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var today = new Date();
var tdate = new Date("september 1,2013, 14:58:12");
</script>
</body>
</html>
运行结果：浏览器界面上是空的，这时候按F12，点击console界面，输入定义的变量值today和tdate会出现这两个变量的值。
常用方法
image.png
同时在上面的console界面中，可以直接调用变量today和tdate的这些方法，后面一定要加上括号，不加括号的话不会出现想要的结果。
制作时钟特效
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟</title>
</head>
<body>
<div id="myclock"></div>
<script>
function disption() {
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML = "现在是：" + hh + ":" + mm + ":" + ss;
}
disption();
</script>
</body>
</html>
运行结果：
image.png
三、Math对象
image.png
3.1如何实现返回的整数范围为2~99？
var iNum = Math.floor(Math.random() * 98 + 2);
3.2随机选择颜色
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择颜色</title>
<style type="text/css">
#color{font-family: "微软雅黑";
font-size: 16px;
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<div>
本次选择的颜色是：<span id="color"></span>
<input type="button" value="选择颜色" onclick="selColor();">
</div>
<script type="text/javascript">
function selColor(){
var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var num=Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
</script>
</body>
</html>
四、总结
- Math对象
- Date对象
