javascripts 一

最新推荐文章于 2023-01-20 16:24:41 发布

DarkQE

最新推荐文章于 2023-01-20 16:24:41 发布

阅读量172

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/wwwfdfsf/article/details/125823210

版权

一.js作用域

1.作用域：代码名字（变量）在某个区域内起作用，更重要的是提高程序的可靠性，减少命名冲突。

2.全局作用域：整个js文件

3.局部作用域：代码名字只在某个区域内有效

4.作用域链：内部函数访问外部函数的变量，依次往上一级查找

二。js执行

1.预解析和代码执行

1.预解析：var function提升到当前作用域的最前面；变量预解析和函数预解析；

变量提升：只提升声明不提升赋值

函数提升：var fun=function（）{} 声明提升到前面但不调用

2.代码执行：从上到下依次执行

三.js对象

1.对象的组成

1.对象由属性和方法组成

属性：事物的特征

方法：事物的行为

2.创建对象

1.通过字面量创建对象

var obj={}//创建了一个空对象

//创建一个简单对象--方法采用键值对形式，多个属性或者方法用逗号隔开

var obj={

name:"zhangsan",

age:18,

sex:'男',

sayhi:function(){

consolog.log()

}

}

2.通过new Object创建对象

//；隔开

var obj= new Object();

obj.name='zhuangsan';

obj.age=18;

obj.sayhi=function(){}

3.通过构造函数创建对象（构造函数可创建多个对象）

将相同的属性和方法封装到函数中去

构造函数名字首字母大写

对象：具体的事物

构造函数：泛指某一大类

实例化：利用构造函数创建对象的过程

function Star(name,age,sex){
		this.name=name;
		this.age=age;
		this.sex=sex;
	}
 var St=new Star('zhangsan',18,'男');
 var St1=new Star('ls',25,'女');
 console.log(St.name);

2.调用对象

对象名.对象属性名或者对象名.方法名

consolog.log(obj.name)

consolog.log(obj['name'])

3. 变量和属性的相同

都用来存储数据

变量：单独存在，使用直接写变量名

属性：在对象里面，使用对象名.属性

4.new

new：构造函数new可以在内存中创建一个空的对象

this：this指向刚才创建的空的对象

执行构造函数里面的代码给空对象添加属性和方法

返回对象

5.遍历对象

for....in..

for（变量 in 对象） {}

St--对象名

for(var k in St){
console.log(St[k]);
}

四.内置对象

1.js自带对象

Math Date Array String等

2.查文档MDN/w3c

3.Math对象

Math.PI--圆周率

Math.floor--向下取整

Math.ceil--向上取整

Math.round--四舍五入

Math.abs--绝对值

Math.min--最小值
Math.max()--最大值

4.随机数random

random：返回一个随机的小数，0-1之间

Math.random()

两个数之间的整数

 function getRndom(max,min){
	 return Math.floor(Math.random()*(max-min+1))+min;
 }

1.猜字

 function getRndom(max,min){
 	 return Math.floor(Math.random()*(max-min+1))+min;
 }
 var random=getRndom(1,10);
 while(true){
	 var num=prompt("你来猜？输入1-10之间");
	 if(num>random){
		 alert("猜大了")
	 }else if(num<random){
		 alert("猜小了");
	 }else{
		 alert("猜对了");
		 break;
	 }
 }

5. 日期对象Date

1.用new关键字来创建日期对象

没有参数当前系统的的时间

var date=new Date()

//数字型

var date=new Date(2020,10,1)

//字符串型

var date = new Date（‘2021-10-1 05:25：49’）

2.常用的日期

获得Date总的毫秒数，不是当前时间的毫秒数，而是距离1970年1月1日过了多少毫秒数

通过valueof（）和getTime（）

1.getFullYear（）//获取年

2.getMonth（）//获取月（0-11）

3.getDate()//获取当天日期

4.getDay（）//获取星期几（周日到周六）

5.getHours（）//获取当前小时

6.getMinutes（）//获取当前分钟

7.getSeconds（）//获取当前秒钟

五.日期对象案列

1.倒计时案列

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>倒计时</title>
		<link rel="stylesheet" href="css/count_down.css">
		<script src="js/count_down.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="count_down">
			<h3>距离开始还有</h3>
			<p class="count_down_item"></p>
		</div>
	</body>
</html>

css：

*{margin: 0;padding: 0;}
.count_down{
	position: relative;
	margin: 10px auto;
	height:545px;
	width: 550px;
	background: url("../img/count_down.jpeg")no-repeat 30px 10px;
	background-size: contain;
}
.count_down h3{
	color: aqua;
	padding:30% 26%;
}
.count_down .count_down_item{
	color: aquamarine;
	position: absolute;
	left: 115px;
	top:254px;
	font-size: 20px;
}

js ：

window.onload=function(){
	var oP=document.getElementsByClassName("count_down_item")[0];
	function countDown(time){
		var nowTime=+new Date();
		var inputDate=+new Date(time);
		var times=(inputDate-nowTime)/1000;
		var d=parseInt(times/60/60/24);
		 d=d<10?"0"+d:d;
		var h=parseInt(times/60/60%24);
		 h=h<10?"0"+h:h;
		var m=parseInt(times/60%60);
		 m=m<10?"0"+m:m;
		var s=parseInt(times%60);
		 s=s<10?"0"+s:s;
		return d+"天"+h+"时"+m+"分"+s+"秒"
	}
	
	setInterval(function(){
		var item=countDown('2022-9-1 14:25:00');
		oP.innerHTML=item;
	},1000)
	
}

效果：