对象类型转换 Data对象倒计时引用类型

最新推荐文章于 2024-01-31 17:46:10 发布

敲代码的皮皮

最新推荐文章于 2024-01-31 17:46:10 发布

阅读量199

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/cc12345_10/article/details/116274623

版权

1.对象


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
		
	</head>
	<body>
		<!-- 点击事件也可以绑定在元素上 -->
		<button type="button" id="btn" οnclick="alt(this)">点击</button>
	</body>
</html>
<script type="text/javascript">
	function alt(n){
		// alert(this.id);
		console.log(n.id);
	}
	// 获取button 对象
	// var btn = document.getElementById("btn");
	// btn.onclick = alt;
	/*
	对象
	创建一个对象的方法
	1. 通过 {}创建对象，也叫字面量
	2.通过构造函数创建对象 new Object()
	
	对象里面包含了属性和方法
	
	*/
   var obj = {}; //创建了一个对象
   console.log(typeof obj);
   
   /*
   如以下例子，name，age，say 等，叫做key，他们对应的值，叫做value
   key都可以叫做对象的属性，如果对应的value值是一个匿名函数，我们一般叫做对象的方法
   
   获取对象的属性
	1. obj.属性名
	2. obj['属性名']
   */ 
   var obj1 = {
	   "name":"郭嘉",
	   age:30,
	   say:function(){
		   console.log('天妒英才');
	   }
   };
   console.log(obj1.name); //获取对象obj1的name属性的value值
   console.log(obj1['name']);
   obj1.say(); //调用对象的方法
   
   /* 给对象添加属性和方法
	1. obj.属性名='属性值'
	2. obj['属性名']='属性值'
	
   */
	obj1.job = '谋士';
	obj1.eat = function(){
		console.log('炒萝卜');
	};
	console.log(obj1);
	
	//声明一个对象
	var obj2 = {};
	obj2.name = '诸葛亮';
	obj2.age = 26;
	obj2.job = function(){
		console.log('打仗');
	};
	console.log(obj2);
	// 通过构造函数的方法创建对象
	var obj3 = new Object();
	obj3.name = '葫芦娃';
	obj3.age = 0;
	obj3.job = function(){
		console.log('打压怪');
	};
	console.log(obj3);
	/*
	循环对象
	for in
	循环输出对象的时候，不能使用 obj.key,因为此刻的key是一个变量，. 操作的权重很高，在还没有把变量转为所代表的的那个值的时候，. 已经把key进行解析，也就是会输出 属性名为key的值，如果没有属性名为key，则无法输出
	*/
   for(var key in obj3){
	   console.log(obj3[key]);
   }
   for(var key in obj3){
   	   console.log(obj3.key);
   }
</script>

2.对象练习


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象练习</title>
	</head>
	<body>
		<ul id="list">
			<!-- <li><span>姓名：朱温</span><span>年龄：30岁</span></li> -->
		</ul>
	</body>
</html>
<script type="text/javascript">
	var arr = [
		{name:'朱温',age:30},
		{name:'李克用',age:32},
		{name:'石敬瑭',age:28},
		{name:'刘知远',age:25},
		{name:'郭威',age:21}
	];
	var list = document.getElementById("list");
	var html = '';
	for(var i=0;i<arr.length;i++){
		html += '<li>';
		html += '<span>姓名:'+arr[i].name+'</span>';
		html += '<span>年龄:'+arr[i].age+'</span>';
		html += '</li>';
	}
	
	list.innerHTML = html;
	
	
</script>

3.类型转换


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类型转换</title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	/*
	Number() 把数据转化为number类型，如果是字符串类型转number，只能转数值型的字符串，否则转为NaN, bool类型的数据会转化为 0 和 1、
	
	String() 转化成字符串类型
	toString() 转化成字符串
	*/
   var str1 = '123px'; // 字符串
   var num1 = Number(str1);
   console.log(num1,typeof num1);
   
   var num = 234;
   var str2 = String(num);
   var str3 = num.toString();
   console.log(str2,typeof str2);
   console.log(str3,typeof str3);
   
   /*
   常用
   Number() : 会忽略字符串开头的空格
   parseInt(): 必须是以数字或者空格+数字开头，后面的字符随便，会把开头的数字提取出来，转化为number，当遇到第一个非数字字符的时候，停止转化
	两个参数
		1.要转化的内容
		2.把要转化的内容，按照几进制转化为10进制,默认是10
	parseFloat() 参数一个
		用法和parseInt是一样的，区别是parseInt只能转整数，parseFloat是可以转小数的
   */
  var str4 = '    456';
  var num2 = Number(str4);
  console.log(num2,typeof num2);
  var num3 = parseInt(' 234px34px');
  console.log(num3,typeof num3);
   
  var num4 = parseInt('100sadf',2);
  console.log(num4);
  var num5 = parseFloat('100.25sadf');
  var num6 = parseInt('100.25sadf');
  console.log(num5,num6);
  /*
  对象转字符串  JSON.stringify(obj)
  字符串转对象  JSON.parse(json类型的字符串);
	
  json和对象大致一样，只是json的key和value都必须使用双引号括起来
  json数据中一般没有方法
  
  */
 var obj = {
	 name:'朱友珪',
	 age:23,
	 job:'弑父'
 };
 
 var str5 = JSON.stringify(obj);
 console.log(str5);
 var str6 = '{"name":"李存勖","age":23}';
 var obj1 = JSON.parse(str6);
 console.log(obj1);
</script>

4.Date对象


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Date</title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	/*
	Date 日期对象，是一个专门处理日期的构造函数
	
	*/
   // 如果没有参数，new Date() 此时获取的是当前电脑的系统时间
   var date = new Date();
   console.log(date, typeof date);
   // Date 中常用的函数，返回值都是number
   //getYear(): 获取的是1900年到当前多少年，目前已被废弃
   var year = date.getYear();
   console.log(year);
   //getFullYear(): 获取的是当前年份
   var fullYear = date.getFullYear();
   console.log(fullYear);
   //getMonth()：获取当前日期对象中的月份，从0开始计算
   var month = date.getMonth();
   console.log(month);
   //getDate(): 获取当前月份的第几天
   var day = date.getDate();
   console.log(day);
   //getDay(): 获取星期几，0-6 0代表周日
   var week = date.getDay();
   console.log(week);
   
   //getHours(): 获取当前日期对象中的小时数，0-23
   var h = date.getHours();
   console.log(h);
   // getMinutes(): 获取当前日期对象中的分钟数，0-59
   var m = date.getMinutes();
   console.log(m);
   // getSeconds(): 获取当前日期对象中的秒数，0-59
   var s = date.getSeconds();
   console.log(s);
   //getMilliseconds() 获取毫秒
   var ms = date.getMilliseconds();
   console.log(ms);
   
   console.log(fullYear+'年'+(month+1)+'月'+day+'日'+' '+h+':'+m+':'+s);
   
   //getTime() : 时间戳，返回的是1970年1月1日早上8点到当前时间的毫秒数
   var time = date.getTime();
   console.log(time);
   
   function myDate(){
	   var date = new Date();
	   var y = date.getFullYear();
	   var mm = date.getMonth()+1;
	   var d = date.getDate();
	   var h = date.getHours();
	   var m = date.getMinutes();
	   var s = date.getSeconds();
	   var week = date.getDay(); // 0-6
	   var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
	   // document.body 获取body
	   s = s<10?'0'+s:s;
	   document.body.innerHTML = y+'年'+mm+'月'+d+'日 '+h+':'+m+':'+s+' '+arr[week];
	   
   }
   myDate();
   setInterval(myDate,1000);
   
   /*
   创建固定日期的date对象，必须在Date中写入日期参数
   1.Date(年,月,日,时,分,秒)  注意：月份-1
   2.Date("月 日 年 时:分:秒")
   3.Date("月 日,年 时:分:秒")
   */
  var date2 = new Date(2021,2,27,12,0,0);
  console.log(date2);
  var date3 = new Date("3 27 2021 12:00:00");
  console.log(date3);
  
  var date4 = new Date("3 27,2021 12:00:00");
  console.log(date4);
</script>

5.倒计时


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>倒计时</title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	var timmer;
	function QM(){
		//设置date对象，如果不给时分秒，则表都是0
		var qm = new Date('4 3 2021');
		
		//获取当前时间
		var now = new Date();
		
		//两个日期对象相减，得到的是时间戳的差值
		var oDate = qm - now;
		console.log(oDate);
		// 天数
		var day = Math.floor(oDate/1000/3600/24);
		console.log(day);
		//小时
		var hour = Math.floor((oDate/1000/3600)%24);
		console.log(hour);
		//分钟
		var min = Math.floor((oDate/1000/60)%60);
		console.log(min);
		
		//秒
		var s = Math.floor((oDate/1000)%60);
		console.log(s);
		
		document.body.innerHTML = '距离清明节放假还有'+day+'天,'+hour+'小时'+min+'分钟'+s+'秒';
		
		// 倒计时终止
		if(oDate<=0){
			clearInterval(timmer);
		}
	}
	QM();
	
	timmer = setInterval(QM,1000);
</script>

6.引用类型


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引用类型</title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	/*
	js数据类型
	字符串，数字，布尔，对象，undefined
	
	ECMAScript 变量有两种数据类型：基本类型 和 引用类型,也有其他叫法，比如说 原始类型和对象类型，拥有方法的类型和不能拥有方法的类型，还以可以分为可变类型和不可变类型，其实这些叫法都是根据这两种类型的特点来命名的
	基本类型的特点
		1.基本类型的值不可变
		2.基本类型的比较是值的比较
		3.基本类型的变量存在于栈区中(栈内存，数据 先进后出)
	栈存放数据，先进后出，自动分配内存空间，自动释放
	堆，先进后出，动态分配内存，大小不定，也不自动释放
	
	引用类型的特点
		1.引用类型的值可变
		2.引用类型的值同时存在于栈内存和堆内存中
		3.引用类型的比较是引用的比较
		
	js中的引用类型 数组和对象
	*/
   var arr = [1,2,'宋江',4,'林黛玉'];
   console.log(arr);
   var arr1 = arr;
   console.log(arr1);
   arr.push('孙悟空');
   console.log(arr1);
   var arr2 = arr.slice();
   arr2.push('西门庆');
   console.log(arr,arr2);
   
   var obj = {
	   name:'宋江',
	   age:30,
	   job:function(){
		   console.log(this.name);
	   }
   };
   console.log(obj);
   var obj1 = obj;
   console.log(obj1);
   obj1.name = '东方塑';
   console.log(obj);
   
</script>

7.arguments


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>arguments</title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	/*
	在每一个函数中，都有一个arguments类数组，在他里面存储着这个函数的所有参数，他是一个数组的形式，但是不是数组，不能执行数组的删除和添加方法，只能进行读取
	*/ 
	function add(){
		console.log(arguments);
		var sum = 0;
		for(var i=0;i<arguments.length;i++){
			sum += arguments[i];
		}
		return sum;
	}
	var num = add(1,2,3,4,5,6,7,8,89,09,0);
	console.log(num);
	
	function abc(){
		var str = '少年强则国强';
		// arguments.callee 指的是当前所在的函数本身
		console.log(arguments.callee);
	}
	abc();
</script>