JS学习日记--Math对象和日期对象-CSDN博客

本文链接：https://blog.csdn.net/weixin_42149770/article/details/103906237

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>