JS基础练习2

文章目录

计算器

请添加图片描述


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			body {
				background-color: #4c4c4c;
			}

			input {
				margin-top: 3%;
				width: 25%;
				height: 50px;
				font-size: 30px;
				color: white;
				border-style: none;
				background-color: black;
			}

			table {
				background-color: #6f6f6f;
			}

			tr {
				text-align: center;
				font-size: 30px;
				height: 20%;
			}

			td {
				cursor: pointer;
				width: 25%;
			}

			td:hover {
				background-color: #efefef;
			}

			button {
				width: 100%;
				height: 100%;
				background-color: #6f6f6f;
				border: none;
				font-size: 30px;
			}

			button:hover {
				background-color: #efefef;
			}
		style>
	head>
    
	<body>
		<center>
			<input type="text" id="showResult" value="0" readonly>
			<table width="25%" height="500px" border="1" cellspacing="0" align="center">
				<tr>
					<td id="clear">Ctd>
					<td id="del">Ttd>
					<td id="per">%td>
					<td class="ysf">/td>
				tr>
				<tr>
					<td class="num">7td>
					<td class="num">8td>
					<td class="num">9td>
					<td class="ysf">*td>
				tr>
				<tr>
					<td class="num">4td>
					<td class="num">5td>
					<td class="num">6td>
					<td class="ysf">-td>
				tr>
				<tr>
					<td class="num">1td>
					<td class="num">2td>
					<td class="num">3td>
					<td class="ysf">+td>
				tr>
				<tr>
					<td colspan="2" class="num">0td>
					<td><button id="point">.button>td>
					<td id="result">=td>
				tr>
			table>
		center>
	body>
    
	<script>
		//存储两个数字 和 一个运算符
		var numValue1 = '';
		var numValue2 = '';
		var opr = '';
		//获取屏幕对象
		var showResult = document.getElementById("showResult");
		//为所有的数字绑定点击事件 并输入到屏幕显示
		var nums = document.getElementsByClassName("num");
		for (let i = 0; i < nums.length; i++) {
			nums[i].onclick = function() {
				//获取数字 +=用来追加数字
				numValue1 += this.innerHTML;
				showResult.value = numValue1;
			}
		}
		//为 . 绑定点击事件 防止一个数存在多个小数点
		var point = document.getElementById("point");
		point.onclick = function() {
			if (numValue1.indexOf(".") == -1) {
				numValue1 += this.innerHTML;
				showResult.value = numValue1;
			} else {
				alert("一个数只能有一个小数点 不能重复");
			}

		};
		//为所有的运算符绑定点击事件
		var oprs = document.getElementsByClassName("ysf");
		for (let i = 0; i < oprs.length; i++) {
			oprs[i].onclick = function() {
				//将numValue1的值赋给numValue2 
				//numValue1继续用来接收用户输入的第二个数
				opr = this.innerHTML;
				if (numValue2 == "") {
					numValue2 = numValue1;
					numValue1 = "";
				} else if (numValue1 != "") {
					//调用计算方法
					resultFun();
				}
			}
		}
		//为 = 绑定点击事件
		document.getElementById("result").onclick = function() {
			resultFun();
		}
		//清零  为 C 绑定点击事件 
		document.getElementById("clear").onclick = function() {
			numValue1 = "";
			numValue2 = "";
			opr = "";
			showResult.value = "0";
		}
		//退格 为 T 绑定点击事件
		document.getElementById("del").onclick = function() {
			if (numValue1.length > 1) {
				numValue1 = numValue1.substring(0, numValue1.length - 1);
				showResult.value = numValue1;
			} else {
				showResult.value = "0";
			}
		}
		//取百分号  为 % 绑定点击事件
		document.getElementById("per").onclick = function() {
			numValue1 = numValue1 * 0.01;
			showResult.value = numValue1;
		}
		//编写计算方法
		function resultFun() {
			//one用户输入的第一个数
			var one = Number(numValue2);
			//two用户输入的第二个数
			var two = Number(numValue1);
			//res计算结果
			var res = null;
			//使用选择语句 来判断不同的运算符的计算方法
			switch (opr) {
				case "+":
					res = one + two;
					break;
				case "-":
					res = one - two;
					break;
				case "*":
					res = one * two;
					break;
				case "/":
					if (two == 0) {
						alert("除数不能为0 请重新输入")
						numValue1 = "";
						numValue2 = "";
						opr = '';
						res = 0;
					} else {
						res = one / two;
					}
					break;
			}
			//结果保留小数点后六位
			numValue2 = res.toFixed(6);
			numValue1 = "";
			//numValue2 * 1 可以将尾部无效的0去掉
			showResult.value = numValue2 * 1;
		};
	script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

倒计时

请添加图片描述


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			body {
				background-color: #664E98;
			}

			#d1 {
				margin-left: 20%;
				margin-top: 2%;
				/* 边框圆角 */
				border-radius: 10px;
				width: 60%;
				height: 200px;
				background-color: #AF87A3;

				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.clock {
				width: 16%;
				height: 50%;
				background-color: #8a5898;
				
				display: flex;
				justify-content: center;
				align-items: center;
				
			}

			#d2 {
				margin-left: 20%;
				margin-top: 13%;
				/* 边框圆角 */
				border-radius: 10px;
				width: 60%;
				height: 60px;
				background-color: #AF87A3;

				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			#msText {
				color: #EADCBE;
				font-size: 200%;
				margin-left: 5%;
			}
			#sTian{
				color: #EADCBE;
				font-size: 200%;
			}
			#sShi{
				color: #EADCBE;
				font-size: 200%;
			}
			#sFen{
				color: #EADCBE;
				font-size: 200%;
			}
			#sMiao{
				color: #EADCBE;
				font-size: 200%;
			}

		style>
	head>
	<body>
		<div id="d2">
			<span id="msText">双十一秒杀倒计时span>
		div>
		<div id="d1">
			<div class="clock" id="tian">
				<span id="sTian">span>
			div>
			<div class="clock" id="shi">
				<span id="sShi">span>
			div>
			<div class="clock" id="fen">
				<span id="sFen">span>
			div>
			<div class="clock" id="miao">
				<span id="sMiao">span>
			div>
		div>

	body>
	<script>
        //定时器 每秒执行一次
		setInterval(function() {
            //获取目前时间
			var now = new Date().getTime();
            //获取截止时间
			var end = new Date("2022-11-11 00:00:00").getTime();
            //获取剩余时间 毫秒值
			var time = end - now;
			//如果时间到了 就退出显示
			if (time < 0) {
				return;
			}
			//获取到还剩余的 天数 小时数 分钟数 秒数
			var days = parseInt(time / 1000 / 60 / 60 / 24);
			var hours = parseInt(time / 1000 / 60 / 60 % 24);
			var minutes = parseInt(time / 1000 / 60 % 60);
			var seconds = parseInt(time / 1000 % 60);
			//给浏览器相应部分填充时间内容
			document.getElementById("sTian").innerHTML = days + "天";
			document.getElementById("sShi").innerHTML = hours + "时";
			document.getElementById("sFen").innerHTML = minutes + "分";
			document.getElementById("sMiao").innerHTML = seconds + "秒";
		}, 1000);
	script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

省市区三级联动

请添加图片描述


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<select name="" id="province" onchange="selectProvince()">
			<option value="">--请选择省份--option>
			<option value="">陕西option>
			<option value="">河南option>
		select>

		<select name="" id="city" onchange="selectCity()">
			<option value="">--请选择城市--option>
		select>

		<select name="" id="district">
			<option value="">--请选择区--option>
		select>

	body>
	<script>
		//省市区对象
		var provinces = document.getElementById("province");
		var citys = document.getElementById("city");
		var districts = document.getElementById("district");
		//城市数组
		var cityArr = [
			[],
			["西安", "商洛"],
			["郑州", "洛阳"]
		];

		function selectProvince() {
			//清除之前的旧数据
			citys.length = 1;
			districts.length = 1;
			//获取省份的编号
			provinceIndex = provinces.selectedIndex;
			//取出省份对应的城市数组
			var cityNames = cityArr[provinceIndex];
			for (let i = 0; i < cityNames.length; i++) {
				var option = document.createElement("option");
				option.innerText = cityNames[i];
				citys.appendChild(option);
			}
		}

		//陕西-市区县
		var districtArr1 = [
			[],
			["长安区", "高新区"],
			["商州区", "洛南县"]
		];
		//河南-市区县
		var districtArr2 = [
			[],
			["中原区", "二七区"],
			["老城区", "西工区"]
		];

		function selectCity() {
			//清除之前的旧数据
			districts.length = 1;
            //先判断省份
			if (provinceIndex == 1) {
				//获取市的编号
				var cityIndex = citys.selectedIndex;
				//取出陕西省--城市对应的区县数组
				var districtNames1 = districtArr1[cityIndex];
				for (let i = 0; i < districtNames1.length; i++) {
					var option = document.createElement("option");
					option.innerText = districtNames1[i];
					districts.appendChild(option);
				}
			} else if (provinceIndex == 2) {
				//获取市的编号
				var cityIndex = citys.selectedIndex;
				//取出省--城市对应的区县数组
				var districtNames2 = districtArr2[cityIndex];
				for (let i = 0; i < districtArr2.length; i++) {
					var option = document.createElement("option");
					option.innerText = districtNames2[i];
					districts.appendChild(option);
				}
			}
		}
	script>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

手机验证码倒计时

请添加图片描述


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #08ABEE;
			}

			#d1 {
				margin-left: 30%;
				margin-top: 10%;
				/* 边框圆角 */
				border-radius: 10px;
				width: 40%;
				height: 300px;
				background-color: white;

				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}

			.c1 {
				margin-top: 3%;
				margin-left: 15%;
			}

			#tel {
				width: 60%;
				height: 30px;
			}

			#i2 {
				width: 60%;
				height: 30px;
			}

			#b1 {
				width: 20%;
				height: 30px;
			}

			#b2 {
				width: 60%;
				height: 30px;
			}

			button {
				color: white;
				border: 0;
				border-radius: 5px;
				background-color: #5F6CE6;
			}
		style>
	head>
    
	<body>
		<div id="d1">
			<div id="f1" class="c1">
				短信快捷登录
			div>
			<div class="c1">
				<form action="#" method="GET">
					<input type="text" id="tel" name="phone" value="" placeholder="请输入手机号(11位)" onblur="checkTel()">
				form>
				<span id="telText">span>
			div>
			<div class="c1">
				<input type="" id="i2" name="yzm" placeholder="请输入验证码">
				<button id="b1">获取验证码button>
			div>
			<div class="c1">
				<button id="b2">立即登录/注册button>
			div>
			<div class="c1">
				<input type="radio" name="" id="ty"><label for="ty">同意注册协议label>
			div>
		div>
	body>
    
	<script type="text/javascript">
		//验证手机号
		function checkTel() {
			var regx = /^1[0-9]{10}$/;
			var value = document.getElementsByName("phone")[0].value;
            //正则判断手机号格式
			var flag = regx.test(value);
            //提醒用户 手机号格式是否正确
			var telText = document.getElementById("telText");
			if (flag) {
				telText.innerHTML = "手机号格式正确✔";
			} else {
				telText.innerHTML = "手机号格式错误✘";
			}
			return flag;
		}

		//发送验证码
		var butYzm = document.getElementById("b1");
		//验证码发送的时长
        var time = 5;
        //定时器
		var timer = null;
		butYzm.addEventListener("click", function() {
			//按钮不可点击状态
			this.disabled = true;
			if (checkTel()) {
				timer = setInterval(function() {
					if (time == 0) {
						//停止计时器
						clearInterval(timer);
						//启用按钮
						butYzm.disabled = false;
						butYzm.innerHTML = "获取验证码";
						time = 5;
					} else {
						butYzm.innerHTML = time + "秒后再获取";
						time--;
					}
				}, 1000);
			} else {
				alert("请输入手机号");
			}
		});
	script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

相关阅读:
【秋招面经】菜鸟前端题目总结
 canvas绑定键盘事件不会生效 + 解决办法
 不同网络请求框架之间的对比
 技术人必看！数据治理是什么？它对数据中台建设重要吗？
Spring Security即将弃用配置类WebSecurityConfigurerAdapter
C# 实验一
 JS高级：对象创建模式
 面试系列 - Redis持久化机制详解
 排查Windows内存泄漏问题的详细记录
 OpenAI视频生成Sora技术简析
原文地址：https://blog.csdn.net/m0_51318597/article/details/126262161