1.何爲對象
什麼事對象，其實就是一種類型，即【引用】類型。而對象就是【引用類型】的實例。在ECMAScript中引用類型是一種【數據結構】，用於將【數據和功能】組織在一起。相當於其他語言裏的類，但是ECMAScript中沒有類這種東西
2.對象的創建
對象中存儲的數據，叫做對象的屬性，存儲的函數，叫做對象的方法。
- 使用new運算符創建對象
var person= new Object();
person.name=“xxx”//給該對象添加屬性
person.shouName = function(){}//給該對象添加方法 - new運算符可以省略
var person = Object(); - 使用常量去創建對象
var person = {}; - 【注】可用delete刪除對象屬性
3.Math對象
具體如下：
<script type="text/javascript">
/*
Math對象用於執行數學任務
Math.PI 約定於3.14159
*/
// alert(Math.round(3.5));//四捨五入
//alert(Math.random());//隨機0~1之間隨機數
//alert(Math.max(10,20,30));//返回較大的數
//alert(Math.min(10,20,30));//返回較小的數
//alert(Math.abs(-10));//返回絕對值
//alert(Math.ceil(3.1));//向上取整
//alert(Math.floor(3.9));//向下取整
//alert(Math.pow(2,5));//2的5次方
//alert(Math.sqrt(4));//開平方
/*
Math對象勾股函數
參數：都是弧度，Math.PI=180弧度
[注]：計算機本身在計算小數的時候就有bug
*/
alert(Math.sin(Math.PI/2));
alert(Math.cos(Math.PI/3));//0.50000000000001
alert(Math.tan(Math.PI/4));//0.99999999999999
</script>
4.日期對象
-
創建方式： var d = new Date
【參數】：如果我們不傳參數，默認獲取的就是當前系統時間
【參數類型】(“2015/01/22”)或 (“2015-01-22”)或(“2015,01,22,14,34”)
【注】：參數也可以是毫秒數，返回的是從1970年1月1日0時+這個數的時間（Unix誕生日）具體方法如下：
<script type="text/javascript">
var a=new Date();
/*alert(a.toDateString());//以特定的格式顯示星期幾、月、日和年
alert(a.toTimeString());//顯示時、分、秒和時區
alert(a.toLocaleDateString());//特定地區格式顯示年月日
alert(a.toLocaleTimeString());//..時、分、秒
alert(a.toUTCString());//特定格式顯示完整的UTC日期
*/
alert(a.getDate());//獲取，返回一個月中的某一天（1~31）
//a.setDate(4);//設置
alert(a.toDateString());
alert(a.getDay());//一週中的某一天（0~6）
alert(a.getMonth());//月份（0~11）
alert(a.getFullYear());//以四位數返回年份
alert(a.getHours());//小時（0~23）
alert(a.getMinutes());//分鐘（0~59）
alert(a.getSeconds());//秒數（0~59）
alert(a.getMilliseconds());//毫秒
alert(a.getTime());//從1970.1.1至今的毫秒
alert(a.getTimezoneOffset());//本地時間與格林威治標準時間的分鐘差
/*
Date.parse("2015-08-24")
參數：是一個日期格式的字符串
功能：返回這個日期距離1970年的毫秒數
</script>
5.定時器
- setInterval()
【格式】：setInterval(函數，毫秒數);
【功能】：每隔所傳參數的毫秒數，就調用一次所傳參數的函數
【返回值】：當前頁面上對於這個定時器的唯一標識，定時器的ID - clearInterval()
【參數】：定時器的ID
【功能】： 取消定時器
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定時器</title>
<script type="text/javascript">
var count=0;
window.onload=function(){
var b=document.getElementById("but");
b.onclick=function(){
setInterval(function(){
document.write(count++);
},1000)
}
}
</script>
<style type="text/css">
#but{
width: 90px;
height: 120px;
}
</style>
</head>
<body>
<div >
<input type="button" id="but" value="按鈕"></input>
</div>
</body>
</html>
功能：每隔一秒輸出count++
- InnerHTML
【功能】標籤間的所有內容，包括在內的其他標籤
【注】：如果在InnerHTML包含標籤，標籤會被識別，並且會解析，呈現對應的效果
代碼如下
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>innerHTML</title>
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById("btn");
var oDiv=document.getElementById("div1");
oBtn.onclick=function()
{
alert(oDiv.innerHTML);
oDiv.innerHTML="<h1>我是替換文本</h1>"
}
}
</script>
</head>
<body>
<div id="div1">
<em>斜體</em>
</div>
<input type="button" name="" id="btn" value="按鈕" />
</body>
</html>
輸出：<em>斜體</em>並且斜體文本換成h1標題文本
6.實現秒錶功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>秒錶</title>
<style type="text/css">
#a{
margin: auto;
width: 400px;
height: 500px;
background-color: red;
text-align: center;
}
#xianshi{
width: 400px;
height: 200px;
line-height: 200px;
margin: auto;
font-size: 50px;
background-color: purple;
}
#btn input{
width: 240px;
height: 60px;
font-size: 20px;
margin-top: 22px;
}
</style>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
var count=0;
var count1=1;
var count2=1;
var timer;
function showNum(num)
{
}
window.onload=function()
{
$("start").onclick=function()
{
timer=setInterval(function(){
if(count<10)
$("sec1").innerHTML="0"+ count++ ;
else
$("sec1").innerHTML=count++ ;
if(count==60)
{
if(count1<10)
$("sec").innerHTML="0"+ count1++ +":";
else
$("sec").innerHTML=count1++ +":";
count=0;
}
if(count1==61)
{
count1=0;
if(count1<10)
$("sec").innerHTML="0"+ count1++ +":";
else
$("sec").innerHTML=count1++ +":";
count=0;
if(count2<10)
$("min").innerHTML="0"+ count2++ +":";
else
$("min").innerHTML=count2++ +":";
}
},10)
}
$("pause").onclick=function()
{
clearInterval(timer);//
}
$("end").onclick=function()
{
$("sec1").innerHTML="00";
$("sec").innerHTML="00:";
$("min").innerHTML="00:";
count=0;
count1=1;
count2=1;
clearInterval(timer);
}
}
</script>
</head>
<body>
<div id="a">
<div id="xianshi">
<span id="min">
00:
</span>
<span id="sec">
00:
</span>
<span id="sec1">
00
</span>
</div>
<div id="btn">
<span id="btn1"><input type="button" name="" id="start" value="開始" /></span>
<span id="btn2"><input type="button" name="" id="pause" value="暫停" /></span>
<span id="btn3"><input type="button" name="" id="end" value="結束" /></span>
</div>
</div>
</body>
</html>
其實有很多函數可以封裝起來，代碼就不會這麼冗餘，但是實在懶得改了…