JavaScript第二次学习

最新推荐文章于 2024-05-06 15:03:18 发布

乾❈ 易直

最新推荐文章于 2024-05-06 15:03:18 发布

阅读量116

点赞数

分类专栏： js条件语句文章标签： js

本文链接：https://blog.csdn.net/CSNDshengqian/article/details/112513282

版权

js条件语句专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、简单的条件语句

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#cl{
				width: 200px;
					
			}
		</style>
	</head>

	<body>
		<h4>点击按钮检测是否符合要求</h4>
		身高：<input type="number" id="cl" placeholder="请输入身高"/>
		年龄：<input type="number" id="height" placeholder="请输入年龄"/><br><br>
		
		是否符合要求：<br><br><button onclick="a()">点击按钮</button>
		<script>
			function a() {
				var money = document.getElementById("cl").value;
				var height = document.getElementById("height").value;
				var a = "恭喜你，请于明早8点前来公司面试";
				var b = "非常抱歉，您不符合要求";
				if(money >= 18 && money<=30 && height >= 170 ) {
					alert(a);

				} else {
					alert(b);
				}

			}
		</script>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<input type="number" id="age" placeholder="请输入年龄" />
		<button onclick="a()">点击</button>
		<p id="txt"></p>
		<script>
			function a() {
				var oTxt = document.getElementById("txt");
				var age = document.getElementById("age").value;
				if(age > 0 && age < 18) {

					oTxt.innerHTML = "年轻人，好好学习";
					oTxt.style.color = "orange";
				} else if(age > 18 && age < 60) {
					oTxt.innerHTML = "打工人，打工魂，打工都是人上人";
					oTxt.style.color = "orange";
				} else if(age >= 60){
					oTxt.innerHTML = "该退休了";
					oTxt.style.color = "brown";
				}
				else{
					oTxt.innerHTML = "输入错误";
					oTxt.style.color = "red";
					
				}

			}
			//				var age =17;
			//				if (age < 18){
			//				
			//					var oP = document.getElementById("txt");
			//					inner:里面
			//					oP.innerHTML = "太年轻";
			//					oP.style.color = "red";
			//					oP.style.boxShadow = "0 0 10px rgba(0,0,0,0.4)";
			//				}
			//				else{
			//					var oP=document.getElementById("txt");
			//					oP.innerHTML = "出去浪";
			//				}
			//			}
		</script>
	</body>

</html>

二、条件语句作业

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				margin: auto;
			}
			
			#x {
				width: 600px;
				height: 600px;
				background-image: url(img/u=3700387168,2958886560&fm=26&gp=0.jpg);
				background-repeat: no-repeat;
				
				
			}
			
			#name {
				float: left;
				margin-top: 150px;
				margin-left: 150px;
			}
			
			.d {
				float: left;
				margin-top: 150px;
				height: 20px;
			}
			
			#txt {
				float: left;
				margin-top: 40px;
				height: 20px;
				margin-left: 150px;
			}
		</style>
	</head>

	<body>
		<div id="x">

			<input type="text" id="name" placeholder="请输入你的名字" />
			<button onclick="a()" class="d">点击获取性格</button>
			<p id="txt"></p>
			<script>
				function a() {
					var n = document.getElementById("txt");
					var age = document.getElementById("name").value;

					if(age == "王军") {
						n.innerHTML = "中二少年";
						n.style.color = "red";
						n.style.background = "white";
					} else if(age == "汪钰博") {
						n.innerHTML = "是个憨憨";
						n.style.color = "chocolate";
						n.style.background = "white";
					} else if(age == "黃远杰") {
						n.innerHTML = "迟到没你都不正常";
						n.style.color = "chocolate";
						n.style.background = "white";
					} else {
						n.innerHTML = "系统无法找到这个同学";
						n.style.color = "red";
						n.style.background = "white";

					}
				}
			</script>
		</div>
	</body>

</html>