JavaScript入门之内置对象

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量91 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45949075/article/details/107401572
版权

Date对象

在这里插入图片描述
在这里插入图片描述
在网页中插入时间（实时更新）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>date</title>
	</head>
	<body>
		<span class="time"></span>
		<script>
			function time(){
				var date = new Date();
				
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				month = month<10?"0"+month:month;
				var day = date.getDate();
				day = day<10?"0"+day:day;
				var week = date.getDay();
				switch (week){
					case 1:
						week="星期一";
						break;
					case 2:
						week="星期二";
						break;
					case 3:
						week="星期三";
						break;
					case 4:
						week="星期四";
						break;
					case 5:
						week="星期五";
						break;
					case 6:
						week="星期六";
						break;
					case 0:
						week="星期日";
						break;
				}
				var hour = date.getHours();
				hour = hour<10?"0"+hour:hour;
				var minnute = date.getMinutes();
				minnute = minnute<10?"0"+minnute:minnute;
				var seconds = date.getSeconds();
				seconds = seconds<10?"0"+seconds:seconds;
				
				document.querySelector(".time").innerHTML=year+"-"+month+"-"+day+" "+week+" "+hour+":"+minnute+":"+seconds;
			}
			
			time();/*消除刚开始的1s真空期*/
			setInterval("time()",1000);/*在1s后再循环执行函数*/
		</script>
	</body>
</html>

String对象

在这里插入图片描述
在这里插入图片描述
故可以将上述用switch求星期几转变成用charAt方法来求星期几：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<span class="time"></span>
		<script>
			function time(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				month = month<10?"0"+month:month;
				var day = date.getDate();
				day = day<10?"0"+day:day;
				var week = date.getDay();
				
				//用charAt()方法求星期
				week = "星期"+"日一二三四五六".charAt(week);
				
				var hour = date.getHours();
				hour = hour<10?"0"+hour:hour;
				var minnute = date.getMinutes();
				minnute = minnute<10?"0"+minnute:minnute;
				var seconds = date.getSeconds();
				seconds = seconds<10?"0"+seconds:seconds;
				document.querySelector(".time").innerHTML=year+"-"+month+"-"+day+" "+week+" "+hour+":"+minnute+":"+seconds;
			}
			
			time();
			setInterval("time()",1000);
		</script>
	</body>
</html>

substr与substring的区别：

			var letters="abcdef";
			//substr第一个参数为起始位置下标，第二个参数为截取长度
			console.log(letters.substr(1,3));
			//substring第一个参数为起始位置下标，第二个参数为截取结束的位置下标
			console.log(letters.substring(1,3));

结果：
在这里插入图片描述

Array对象

在这里插入图片描述
在这里插入图片描述

Function对象

在这里插入图片描述
在这里插入图片描述

为内置对象新增属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//为内置对象新增了一个show方法
			Date.prototype.show = function(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				month = month<10?"0"+month:month;
				var day = date.getDate();
				day = day<10?"0"+day:day;
				var week = date.getDay();
				week = "星期"+"日一二三四五六".charAt(week);
				var hour = date.getHours();
				hour = hour<10?"0"+hour:hour;
				var minnute = date.getMinutes();
				minnute = minnute<10?"0"+minnute:minnute;
				var seconds = date.getSeconds();
				seconds = seconds<10?"0"+seconds:seconds;
				return year+"-"+month+"-"+day+" "+week+" "+hour+":"+minnute+":"+seconds;
			}
			
			var date = new Date();
			console.log(date.show());//调用新增方法显示时间
		</script>
	</head>
	<body>
		
	</body>
</html>

Event对象

在这里插入图片描述

为html添加事件属性的三种方式总结
  1. 在标签内添加onclick属性：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function test(){
				console.log("HelloWorld");
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" onclick="test()" />
	</body>
</html>
  1. 在JavaScript中为标签添加onclick属性：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" id="button" />
		<script>
			document.getElementById("button").onclick=function(){
				console.log("HelloWorld");
			}
		</script>
	</body>
</html>
  1. 在JavaScript中使用事件监听函数调用事件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" id="button" />
		<script>
			document.getElementById("button").addEventListener("click",function(){
				console.log("HelloWorld");
			});
		</script>
	</body>
</html>
onsubmit属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function test(){
				return true;//如果返回false，则不会提交
			}
		</script>
	</head>
	<body>
	<!--向百度发送搜索的关键字-->
		<form action="https://www.baidu.com/s" onsubmit="return test()">
		<!--onsubmit中必须在函数前加return，且函数返回值只能为true或flase-->
			<input type="text" name="wd" />
			<input type="submit" value="查询" />
		</form>
	</body>
</html>
这个名字真难起
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 内置对象
qq_51946936的博客
10-25 115
JavaScript 内置对象 <script> // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可 console.log(Math.PI); // 一个属性 圆周率 console.log(Math.max(1, 99, 3)); // 99 console.log(Math.max(-1, -10)); // -1 console.log(Math.max
JavaScript入门系列二：JavaScript函数和内置对象
NYC的博客
07-05 3398
JavaScript入门系列二：JavaScript函数和内置对象 说明：主要记录一些和Java语言一些不同的地方 1、弹出对话框Alert的使用：弹出一个提示窗 <script> var age=15; if(age<18){ alert("您还没有成年") } </script> 2、接收用户输入的弹窗：prompt prompt接收用户
javaScript中内置对象Date基本操作入门
程序猿布欧的博客
04-25 1417
Date基础语法 /** * Date * * 1970年1月1日（UTC）起经过的毫秒数。 * * 语法 * new Date(); * new Date(value); * new Date(dateString); * new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]); * * @params new new Date(): 创建时刻的日期和时间 * @pa
【JavaScript 零基础入门】内置对象 (一) ------ Math对象
weixin_52212950的博客
05-17 1382
在Java Script 中一共有三类对象，分别是 ‘自定义对象’，‘内置对象’，‘浏览器对象’，其中前两类属于JS基础中的内容，属于ECMA Script，而浏览器对象属于JS独有的一部分内容。在日常代码开发中有很多代码需要频繁使用，例如数学类，日期类，以及Array的一些方法等，对此便有了一些JS的自带对象，这些自带对象提供了很多可以直接使用的属性与方法，使得代码更为精炼。......
JavaScript入门系列之知识点总结
10-22
这只是JavaScript入门的冰山一角，还有更多诸如数组、对象、循环、控制流、事件处理、DOM操作等概念需要学习。继续深入，你将能利用JavaScript构建复杂的交互式Web应用。对于初学者来说，不断实践和理解这些基础知识...
JavaScript入门
03-04
JavaScript是一种广泛..."JavaScript入门"这个主题覆盖了这些基础，从零开始带你走进JavaScript的世界。在"JavaScript-Beginner-main"这个压缩包文件中，可能包含了相关的教程、练习案例或项目，帮助你巩固这些知识。
javascript入门·对象属性方法大总结
10-30
本篇文章将对JavaScript入门中的对象属性方法进行大总结，帮助初学者巩固基础。 首先，我们来看JavaScript中的数组（Array）。数组是一种有序的元素集合，可以通过索引来访问每个元素。其中，`length`属性可获取...
javascript面向对象入门基础详细介绍
10-27
JavaScript提供了一些内置对象，如字符串对象、数组对象、Date对象和Math对象等。这些对象提供了丰富的功能，方便开发者处理各种类型的数据和执行特定的操作。 3. **字符串对象**： - **属性**：字符串对象有一个...
AJAX入门之深入理解JavaScript中的函数
10-31
每个函数都是`Function`类型的实例，这与JavaScript中的内置对象（如`Date`、`Array`、`String`）类似，它们都是内部对象，由JavaScript引擎直接管理。 函数对象与其他用户定义的对象不同，它们不是由构造函数创建...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 166
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 85
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 872
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 179
【代码】前端javascript中的排序算法之插入排序。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 196
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue3 + element-plus 表格行内编辑，如何实现表单校验？
yyXieDaiMa的博客
07-09 373
使用el-form表单自身的校验功能：通过el-from绑定对应表格行的prop， 实现校验。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 84
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 303
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 127
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值