JS基础练习2

已于 2022-08-10 10:59:50 修改
阅读量138 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript 前端 css
于 2022-08-10 10:55:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51318597/article/details/126262161
版权

文章目录

计算器

请添加图片描述

<!DOCTYPE html>
<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">C</td>
					<td id="del">T</td>
					<td id="per">%</td>
					<td class="ysf">/</td>
				</tr>
				<tr>
					<td class="num">7</td>
					<td class="num">8</td>
					<td class="num">9</td>
					<td class="ysf">*</td>
				</tr>
				<tr>
					<td class="num">4</td>
					<td class="num">5</td>
					<td class="num">6</td>
					<td class="ysf">-</td>
				</tr>
				<tr>
					<td class="num">1</td>
					<td class="num">2</td>
					<td class="num">3</td>
					<td class="ysf">+</td>
				</tr>
				<tr>
					<td colspan="2" class="num">0</td>
					<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>

倒计时

请添加图片描述

<!DOCTYPE html>
<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>

省市区三级联动

请添加图片描述

<!DOCTYPE html>
<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>

手机验证码倒计时

请添加图片描述

<!DOCTYPE html>
<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 = "<b style='color:green'>手机号格式正确✔</b>";
			} else {
				telText.innerHTML = "<b style='color:red'>手机号格式错误✘</b>";
			}
			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>
Hello World️
关注
专栏目录
js基础练习题
qq_48687155的博客
07-23 3149
js基础练习题
JS基础练习
10-19
字符串 数组等练习 习题
编写函数实现点击change按钮，为div元素添加红色双线边框
热门推荐
李胜坤的博客
05-10 1万+
div样式文件 <style> #div{ width:200px; height:200px; background:blue; margin-bottom:20px; } </style> js代码 <body> <div id="div">123&lt...
button在点击后出现一个黑色的边框
brilliantSt的博客
04-30 6916
问题描述： button按钮在点击后出现一个黑色的边框，任意点击其它位置就消失，如图： 解决方法： 这个边框是button在获取焦点时 outline 的默认样式，所以在获取焦点是删掉即可，代码如下： button:foucs{ outline:0; } 参考博客： 博客地址 ...
HTML+CSS基础知识
m0_46201565的博客
06-06 3460
HTML+CSS基础文档
【前端面试题】02—59道CSS面试题
油墨香^-^的博客
06-22 531
CSS部分的面试题主要考察应试者对CSS基础概念模型的理解，例如文档流、盒模型、浮动、定位、选择器权重、样式继承等。很多应试者认为CSS很简单，没多少内容，面试就是面试 JavaScript部分的内容，这些观点是错误的，面试的第一关往往会考察应试者对CSS的掌握情况。因此，CSS也常常是应试者掉入的第一个陷阱。 1、CSS有哪些基本选择器？它们的权重是如何表示的？ CSS基本选择器有类选择器、属性选择器和ID选择器。 CSS选择器的权重预示着CSS选择器样式渲染的先后顺序，元素样式渲染时，权重高的选择
JavaScript基础练习
weixin_56105279的博客
03-23 209
基础练习
js基础知识+练习
智商不在服务区的博客
04-14 1095
如果一个变量没有被初始化过，结果就是undefined，是undefined类型var a;undefined和字符串进行相加，结果进行字符串拼接undefined和数字相加，结果为NaNelement.属性 //获取属性值（元素本身自带的属性）element.getAttribute('属性') //主要获取自定义的属性（标准）程序员自定义的属性设置属性值：element.属性='值' //设置内置属性值。
JavaScript 的基础练习题
正是修行时，正是修行时，正式修行时...
07-16 399
js 的基础练习题
JavaScript基础练习集1
Sakurapaid的博客
10-17 1137
JavaScript基础练习集，适合基础回顾练习使用
JavaScript数组基础练习题
欢迎来到长风沛雨的博客
11-13 3938
JavaScript数组基础练习题。
JavaScript基础练习_day7
09-06
### JavaScript基础练习_day7知识点详解 #### 一、概述 本次练习主要针对JavaScript的基本概念进行了深入探讨，适合初学者巩固基础知识。练习题涵盖了变量声明、数据类型、类型转换等核心内容，通过具体示例帮助...
JavaScript基础练习_day12
10-27
### JavaScript基础练习_day12 #### 知识点概述 本篇练习主要涵盖了以下几个方面的JavaScript基础知识： 1. **数组操作**：使用数组进行循环、条件判断等基础操作。 2. **数学运算**：通过数学计算解决实际问题。...
javascript基础练习，一些有趣的小游戏
10-18
javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，...
JavaScript基础练习_day9
10-24
### JavaScript基础练习_day9知识点详解 #### 一、JavaScript基础概念与练习背景 - **标题**: “JavaScript基础练习_day9”表明本练习旨在帮助初学者巩固JavaScript基础知识，并通过实际编程练习来加深理解。 - *...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1151
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
qq_30049249的博客
11-02 215
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
Vue2+3
最新发布
m0_73557953的博客
11-04 67
创建Vue实例 Vue指令
JavaScript-数组
weixin_64689713的博客
11-04 648
/ 定义一个长度为 4 的数组，但是这 4 项都是 undefined两种定义方法根据实际需求选择即可，两者的底层都是同样的实现逻辑。推荐：方括号定义法！
JavaScript基础练习与解析
"JavaScript基础练习题，包括判断题和单选题，涵盖了变量定义、数据类型、字符串、常量、运算符以及变量命名规则等基础知识。" JavaScript是一种广泛用于网页和网络应用的脚本语言，它主要在浏览器环境中运行，为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值