JS学习小结(四)

最新推荐文章于 2020-05-30 22:40:42 发布
最新推荐文章于 2020-05-30 22:40:42 发布
阅读量171 收藏
点赞数 1
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ls_wifi/article/details/102574504
版权
  1. 显示网页时钟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示网页时钟</title>
	</head>
	<body>
		<script type="text/javascript">
			//获取系统当前时间
			var nowTime=new Date();
			//输出
			//document.write(nowTime);
			//转换成具有本地语言环境的日期格式
			nowTime=nowTime.toLocaleString();
			document.write(nowTime);
			document.write("<br>");
			document.write("<br>");
			//当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式.
			var t=new Date();
			var year=t.getFullYear();//返回年信息,以全格式返回.
			var month=t.getMonth();//月份是0-11
			var day=t.getDate();//获取日信息.
			document.write(year+"年"+(month+1)+"月"+day+"日");
			
			document.write("<br>");
			document.write("<br>");
			
			//重点:怎么获取毫秒数？(从1970年1月1日00:00:00 000到当前系统时间的总毫秒数)
			//var times=t.getTime();
			//document.write(times);//一般会使用毫秒数当做时间戳.(timestamp)
			
			document.write(new Date().getTime());
		</script>
		<script type="text/javascript">
			function displayTime(){
				var time=new Date();
				var strTime=time.toLocaleString();
				document.getElementById("timeDiv").innerHTML=strTime; 
			}
			//每隔1秒调用displayTime()函数
			function start(){
			v=window.setInterval("displayTime()",1000);
			}
			function stop(){
				window.clearInterval(v)
			}
		</script>
		<br><br>
		<input type="button" value="显示系统时间" onclick="start();" />
		<input type="button" value="系统时间停止" onclick="stop();"  />
		<div id="timeDiv"></div>
	</body>
</html>

    2.内置支持类Array

     

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置支持类Array</title>dasharray
	</head>
	<body>
		<script type="text/javascript">
			/* //创建长度为0的数组
			var arr=[];
			//数据类型随意
			var arr2=[1,2,3,false,3.14];
			alert(arr2.length);
			//下标会越界吗？
			arr2[7]="test";//自动扩容
			document.write("<br>");
			//遍历
			for(var i=0;i<arr2.length;i++){
				document.write(arr2[i]+"<br>");
			}
			
			//另一种创建数组的对象的方式
			var a=new Array();
			alert(a.length);//0
			
			var a2=new Array(3);
			alert(a2.length);//3
			
			var a3=new Array(3,2);
			alert(a3.length);//2 */
			var a=[1,2,3,9];
			var str=a.join("-");
			alert(str);//1-2-3-9
			
			//在数组的末尾添加一个元素(数组长度+1)
			a.push(10);
			alert(a.join("-"));
			
			//将数组末尾的元素弹出(数组长度-1)
			var endElt=a.pop();
			alert(endElt);
			alert(a.join("-"));
			
			//注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
			//push压栈
			//pop弹栈
			
			a.reverse();
			alert(a.join("="));
		</script>
	</body>
</html>

  3.BOM编程window的close和open

   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM编程-open和close</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
			 1、BOM编程中，window对象是顶级对象，代表浏览器窗口
			 2、window有open和close方法，可以开启窗口和关闭窗口。
			 */
					
		</script>
	    <input type="button" value="开启百度(新窗口)" onclick="window.open('http://wwww.baidu.com');" />
		<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://wwww.baidu.com','_self');" />
		<input type="button" value="开启百度(新窗口)" onclick="window.open('http://wwww.baidu.com','_blank');" />
		<input type="button" value="开启百度(父窗口)" onclick="window.open('http://wwww.baidu.com','_parent');" />
		<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://wwww.baidu.com','_top');" />
		<input type="button" value="关闭窗口" onclick="window.close();" />
	</body>
</html>

  4.BOM编程弹出消息框和确认框

    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出消息框和确认框</title>
		
	</head>
	<body>
		<script type="text/javascript">
			function del(){
				if(window.confirm("亲，确认删除数据吗?")){
					alert("delete data ....")
				}
			}
		</script>
		<input type="button" value="弹出消息框" onclick="window.alert('消息框!')" />
		<input type="button" value="弹出确认框(删除)" onclick="del();" />
	</body>
</html>

 5.BOM编程history历史对象(前进 后退)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history对象</title>
	</head>
	<body>
		<a href="004.html">004页面</a>
		<input type="button" value="前进" onclick="window.history.go(1)" />
	</body>
</html>




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>004</title>
	</head>
	<body>
		007 page!
		<input type="button" value="后退" onclick="window.history.back()" />
		<input type="button" value="后退" onclick="window.history.go(-1)" />
	</body>
</html>

  6. 设置浏览器地址栏上的URL

   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置浏览器地址栏上的URL</title>
	</head>
	<body>
		<script type="text/javascript">
			function goBaidu(){
				//var locationObj=window.location;
				//locationObj.href="http://www.baidu.com";
				document.location="http://www.sina.com.cn";
			}
		</script>
		<input type="button" value="新浪" onclick="goBaidu();"/>
	</body>  
</html>

 

帅哥学Java
关注
专栏目录
js学习总结
Lau的博客
02-05 605
基础语法 打印方式 document.write 页面打印 console.log 控制台打印 添加js代码方式 页面内添加，直接在script标签内进行书写 页面外引入，直接在script标签的src属性中引入文件，可以出现多个script标签，但引入文件的标签体内不能再书写js代码 执行顺序，同步代码自上而下依次执行 注释方式： // 单行注释 /* */ 多行注释 变量个常量 常量：程序运行中其值不可改变的量 变量： 在程序运行过程中，其值不可改变的量，常用var或le
JS 学习总结
woi123的专栏
10-27 244
1.call、apply的使用 语法 function.call(thisObj,param1,param2,param3...); function.apply(thisObj,[param1,param2,param3...]); 用法是改变function的作用域，将参数的上下文作用域修改成thisObj对象, 也可以说this对象为thisObj. 默认的functio...
JavaScript事件学习小结(五）js中事件类型之鼠标事件
11-22
javaScript事件学习小结（四）event的公共成员（属性和方法） //www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结（三）js...
JavaScript学习小结(7)之JS RegExp
01-21
在js中,正则表达式是由一个RegExp对象表示的，RegExp 是正则表达式的缩写。RegExp简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。可以使用一个RegExp()构造函数...
Javascript BOM学习小结(六)
11-23
JavaScript BOM（浏览器对象模型）是JavaScript与浏览器交互的核心机制，允许开发者操作浏览器窗口、导航、弹出对话框等。由于BOM并没有统一的标准，不同的浏览器对它的实现可能存在差异，因此在编写涉及BOM的代码时...
JavaScript事件学习小结（三）js事件对象
11-23
JavaScript事件是Web开发中不可或缺的一部分，它允许我们对用户的交互做出响应。事件对象（event object）是事件发生时，浏览器自动生成的一个对象，包含了与事件相关的各种信息，如事件类型、事件源等。本篇文章...
JS学习总结
01-03
JS的学习总结,详细对js对象的扩张描写
JS的学习总结
weixin_46278125的博客
05-30 194
前言 JS的内容要想全面的总结的话，就现在的水平还不够，本文就对我个人印象比较深刻、比较重要的知识点进行一个概述。 JS 数组的操作 DOM节点的操作 节点的获取 节点的增删 节点属性的获取、设置、删除 JS变量 正则表达式 字符串常用的方法 window对象常用的方法 事件 零碎的一些知识点 Js的数组 定义一个数组var arr = [1,2,3];js中的数组不同于java中的数组，它更像java中的集合，因为js中数组的长度是可变的。 数组元素的常用方法
JavaScript每日小结：深入理解Array对象
在本文档中，我们将深入探讨JavaScript中关于数组的基础知识和常用方法，这对于JavaScript初学者和进阶开发者都是十分有价值的参考资料。以下是对每个知识点的详细解释： 1. **数组常用方法** - `toString()` 方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值