认识JavaScript设计交互页面_js交互设计案例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_70676044/article/details/126959135

上一篇博客说到数学对象和日期对象，先来讲解一下他俩的用法

数学对象

Math是一个内部对象，提供基本的数学函数和常数

常用的Math对象的random（）方法来产生随机数，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num = Math.floor(Math.random()*101)
			var a = prompt("请输入一个数字")
			for(var i=0;i<7;i++){
				if(a==num){
					 alert("恭喜你猜对了")
					 break
				}else if(a>num){
					alert("你猜的数字太大了")
					a = prompt("请重新输入一个数字")
				}else if(a<num){
					alert("你猜的数字太小了")
					a = prompt("请重新输入一个数字")
				}
			}
		</script>
	</body>
</html>

日期对象

Date对象包含日期和时间的相关信息，没有任何属性，它只具有很多用于设置和获取日期的方法

下面利用Date对象，来实现一个走动时针的效果，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span id="time"></span>
		<script type="text/javascript">
			var i=0;
			setInterval(function(){
				var date = new Date()
				var year = date.getFullYear()//获取的年份
				var month = date.getMonth()+1//0-11月份，后面要加1
				var day = date.getDate()//日
				var hours = date.getHours()//获取的是小时
				var minutes = date.getMinutes()//分钟
				var seconds = date.getSeconds()//秒数
				month = month>9?month:"0"+month
				day = day>9?day:"0"+day
				hours = hours>9?hours:"0"+hours
				minutes = minutes>9?minutes:"0"+minutes
				seconds = seconds>9?seconds:"0"+seconds
				var result = year+"年"+month+"月"+day+"日"+hours+":"+minutes+":"+seconds
				document.getElementById("time").innerHTML=result
			},1000)
		</script>
	</body>
</html>

数组对象

数组对象是一系列有序的值得集合，可以存放任何数据类型，建议只存放一种数据类型

关于数组对象的举例方法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr_1 = new Array()
			arr_1[0]="張三"
			arr_1[1]="李四"
			console.log(arr_1.length)
			
			var arr_2=new Array(5)
			arr_2[5]="移動2105"
			console.log(arr_2.length)
			
			var arr_3=["張三","李四","王五","趙六"]
			var str = ""
			for(var i=0;i<arr_3.length;i++){
				str+=arr_3[i]+"*"
			}
			console.log(str)
			var result=arr_3.join("*")
			console.log(result)
			console.log(".................")
			
			var arr_4=["張三","李四","王五","趙六"]
			arr_4.push("張玉")
			arr_4.unshift("陳格")
			arr_4.shift()
			for(var i in arr_4){
				console.log(arr_4[i])
			}
			var result_1 = arr_4.reverse()
			console.log(result_1)
		</script>
	</body>
</html>

JavaScript不支持多维数组，但可以使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
            var citys = new Array()
			citys["河南"]=["郑州","开封","信阳","南阳"]
			citys[1]=["武汉","襄阳","黄石","赤壁"]
				for(var j=0;j<citys[i].length;j++){
					document.write((citys[i][j]))
				}
		</script>
	</body>
</html>

正则表达式对象

中文字符: /^[\u4e00-\u9fa5]+$/
邮箱: /^[0-9a-zA-Z]+@[0-9a-zA-Z+[\.]{1}[0-9a-zA-Z]+$/
电话: /^(\d{3,4}-)?\d{7,8}$/
月份: /^((0?[1-9])|1[0-2])$/
天数: /^((0?[1-9])|((1|2)[0-9])|30|31)$/

正则表达式主要用于表单验证，如手机号，邮箱，身份证等

compile()方法

把正则表达式编译为内部格式，从而执行更快使用新正则去替换旧正则，主要用于提升比较复杂和耗时的处理过程的性能，一般情况下很少使用。

exec()方法

用正则表达式在字符串中查找，并返回包含结果的一个数组。不仅用于判断给定的字符串是否匹配，而且会返回匹配结果的详细信息。

test()方法。

返回一个bool值，它指出被查找的字符串是否匹配给定的模式。使用频繁，主要用于匹配测试。匹配成功返回true，否则返回false。

下面对正则表达式进行举例说明：

实现一个简单的用户注册功能，密码长度至少为6位，且只能是数字，字母，下划线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="pwd" id="pwd" value="" />
		<input type="button" id="checkPwd" value="验证" />
		<script type="text/javascript">
			//正则表达式
			//密码长度至少为6位，且只能是数字，字母，下划线
			document.getElementById("checkPwd").onclick=function(){
				//实现密码的验证
				//编写正则表达式
				var reg=/^[0-9a0zA_]{6,}$/
				var pwd=document.getElementById("pwd").value
				var isPwd=reg.test(pwd)
				if(isPwd){
					alert("密码格式正确")
				}else{
					alert("密码格式不正确")
				}
			}
		</script>
	</body>
</html>