JS自定义对象的创建及JS函数语句和文本框的结合

小姚不会敲代码

已于 2022-09-19 20:16:24 修改

阅读量141

点赞数

文章标签： javascript

于 2022-09-19 20:12:16 首次发布

本文链接：https://blog.csdn.net/apple_67507442/article/details/126940931

版权

自定义对象的创建：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//自定义对象的创建
			//使用object创建一个对象
			var student =new Object()
			// console.log(student)
			//给对象student添加属性stuID，stuName,className
			student.stuID="1001"
			student.stuName="张三"
			student.className="移动2班"
			//给对象添加了一个函数sayHello()
			student.sayHello=function(){
				console.log("大家好")
			}
			console.log(student)
			//对象名，函数名()实现函数的调用
			student.sayHello()
			console.log(student.stuID)
			
			//使用function创建一个对象
			function teacher(tid,tname){
				//this表示当前对象
				this.tid=tid//教师编号
				this.tname=tname//教师姓名//行为
				this.eat=function(){
					console.log("吃饭")
				}
			}
			var t1=new teacher("1","徐高杰")
			//使t1来访问属性和函数
			//调用函数
			t1.eat()
			console.log(t1.tid,t1.tname)
			
		</script>
	</body>
</html>

其他创建对象的方式：

//其他创建对象的方式
			var stu={
				stuID:"1002",
				stuName:"李四"，,
				className:"移动3班",
				study:function(){
					console.log("学习")
				}
			}
			stu.study()
			console.log(stu.stuID,stu.className,stu.className)

函数语句和文本框的结合：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		第一个数：<input type="text" name="" id="one" value="" /><br>
		第二个数：<input type="text" name="" id="two" value="" /><br>
		运算方式：<input type="button" name="yunsuan" id="yusuan" value="+"  onclick="cal('+')"/>
		<input type="button" name="yunsuan" id="yusuan" value="-"  onclick="cal('-')"/>
		<input type="button" name="yunsuan" id="yusuan" value="*"  onclick="cal('*')"/>
		<input type="button" name="yunsuan" id="yusuan" value="/"  onclick="cal('/')"/><br>
		运算结果：<input type="text" name="" id="result" value="" /><br>
		
		<script type="text/javascript">
			function cal(y){
				//实现两个数相加
				// alert()
				//获取文本框的值
				var one=document.getElementById("one").value
				var two=document.getElementById("two").value
				var result=0
				// if(y=="+"){
				// 	 result =parseFloat(one)+parseFloat(two)
				// }else if(y=="-"){
				// 	 result =parseFloat(one)-parseFloat(two)
				// }else if(y=="*"){
				// 	 result =parseFloat(one)*parseFloat(two)
				// }else if(y=="/"){
				// 	 result =parseFloat(one)/parseFloat(two)
				// }
				
				//可以使用switch....case 来实现
				switch (y){
					case "+":
					    result =parseFloat(one)+parseFloat(two)
						break;
					case "-":
					    result =parseFloat(one)-parseFloat(two)
						break;
					case "*":
						    result =parseFloat(one)*parseFloat(two)
							break;
					case "/":
					    result =parseFloat(one)/parseFloat(two)
						break;
					default:
						break;
				}
				document.getElementById("result").value=result
			}
		</script>
	</body>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		Email:<input type="text" name="email" id="email" value="" />
		<input type="button" name="" id="" value="验证" onclick="checkEmail()"/>
		<script type="text/javascript">
			//字符串对象
			var str="Hello World!"
			console.log(str.length)//length用来获取字符串的长度
			console.log(str.charAt(2))
			// function test(){
			// 	console.log("aa")
			// }
			// console.log(test())
			
			console.log(str.indexOf("l"))
			console.log(str.indexOf("b"))
			//判断是否包含某个字符
			console.log(str.substring(0,5))//(0,5)
			//substr():第一个参数值的是索引，第二个参数指的是截取的字符串的长度
			console.log(str.substr(0,2))
			
			//判断邮箱地址格式是否正确  222qqcom
			function checkEmail(){
				//获取文本框中输入值
				var email=document.getElementById("email").value
				if(email.indexOf("@")==-1){
					alert("该邮箱地址中不包括@")
				}else if(email.indexOf(".")==-1){
					alert("该邮箱地址中不包括.")
				}else if(email.indexOf("@")>email.indexOf(".")){
					alert("该邮箱地址中@必须在.的前面")
				}else{
					alert("邮箱地址正确")
				}
			} 
		</script>
	</body>
</html>