JS学习日记--Math对象和日期对象

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年的毫秒数
		

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="

我是替换文本

"
} } </script> </head> <body> <div id="div1"> <em>斜体</em> </div> <input type="button" name="" id="btn" value="按钮" /> </body> </html>
	输出:斜体并且斜体文本换成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>

其实有很多函数可以封装起来,代码就不会这么冗余,但是实在懒得改了…

你可能感兴趣的:(JS学习日记,javascript,js)