JavaScript-案例_if(e.keycode == 13){-CSDN博客

本文链接：https://blog.csdn.net/weixin_62520626/article/details/122471634

开关案例
排他思想
定位到搜索框
图片跟上鼠标
省市二级联动
网页版计算器
轮播图

1.开关案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/pic_bulboff.gif" onclick="kaiGuan(this)">
	</body>
	<script type="text/javascript">
		var flag = true;
		function kaiGuan(ele) {
			if (flag) {
				ele.src = "img/pic_bulbon.gif";
				//开启功能
			} else {
				ele.src = "img/pic_bulboff.gif";
				//关闭功能
			}
			flag = !flag; //修改标记
		}
	</script>
</html>

2.排他思想

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
	</body>
	<script type="text/javascript">
		var btns=document.getElementsByTagName("button");
		for(let i=0;i<btns.length;i++){
			btns[i].onclick=function(){
				//把所有元素的背景恢复成默认
				clearColor();
				this.style.backgroundColor="red";
			}
		}
		
		function clearColor(){
			for(let i=0;i<btns.length;i++){
				btns[i].style.backgroundColor="";
			}
		}
	</script>
</html>

3.定位到搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="search" name="" id="ss" value="" />
		<button type="button" onclick="sousuo()">搜索</button>

		<hr size="12000px">
	</body>
	<script type="text/javascript">
		function sousuo() {
			alert("搜索");
		}
		//当输入完搜索的内容，敲回收开始搜索
		document.getElementById("ss").addEventListener('keydown', function(e) {
			//alert(e.keyCode);
			if (e.keyCode == 13) {
				alert("开始搜索")
			}
		
		})
		
		
		
		//给整个文档绑定按键抬起事件
		document.addEventListener('keyup', function(e) {
			//alert(e.keyCode);
			//判断 按的是 s
			if (e.keyCode == 83) {
				//让输入框获取焦点 focus() 在文本域上设置焦点。 
				document.getElementById("ss").focus();
				e.pageY = 0 + "px"; //让页面定位到顶部  pageY纵坐标
			}
		})
	</script>
</html>

4.图片跟随鼠标移动

标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				position: absolute;
				top:0;
				left:0;
			}
		</style>
	</head>
	<body>
		<img src="img/yazi.gif" id="tp">
	</body>
	<script type="text/javascript">
		//你要整个页面绑定事件，绑定 document 上
		//标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
		//或者 window.event 中获取事件对象
		document.addEventListener('mousemove', function(e) {
			// 2. page 鼠标在页面文档的x和y坐标
			var x = e.pageX;
			var y = e.pageY;
			//获取图片对象
			var img = document.getElementById("tp");
			//设置图片的样式
			img.style.left = x + "px";
			img.style.top = y + "px";
		
		})
	</script>
</html>

5.省市二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="sheng" id="sheng" onchange="selectSheng()">
			<option value="">--请选择省份--</option>
			<option value="1">陕西</option>
			<option value="2">河南</option>
		</select>
		<select name="city" id="city">
			<option value="">--请选择城市--</option>
		</select>
	</body>
	
	<script type="text/javascript">
		//获取省和市的标签对象
		var sheng = document.getElementById("sheng");
		var city = document.getElementById("city");
		
		//设计数据结构，我们可以设计为二维数组
		var citys = [
			[],
			['西安', '咸阳', '安康', '宝鸡', '商洛', '榆林'],
			['郑州', '南阳', '安阳', '开封']
		];
		function selectSheng() {
			//返回或设置下拉列表中的选项数目。
			//city.length=1;
			//方式2
			city.innerHTML="<option>--请选择城市--</option>";
			//获取下拉项的编号
			//selectedIndex 设置或返回下拉列表中被选项目的索引号。
			 var index=sheng.selectedIndex;
			 //取出这个省份对应的城市数组
			 var arr = citys[index]; //0 1 2
			 //遍历城市数组，城市添加到第二个下拉框中
			 for (var i = 0; i < arr.length; i++) {
				/* //创建option标签
			 	var option = document.createElement("option");
				//创建文本节点
			 	var text = document.createTextNode(arr[i]);
				//给option添加 文本
			 	option.appendChild(text);
				//给select添加option
			 	city.appendChild(option); */
				
				//方式2
			 	city.innerHTML+="<option>"+arr[i]+"</option>";
			 }
		}
		
	</script>
</html>

6.网页版计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input {
				height: 70px;
				width: 500px;
				font-size: 50px;
				border: none;
				background: gainsboro;

			}

			table {
				text-align: center;
				font-size: 30px;
				font-weight: 500;
				color: blue;
			}

			td:hover {
				cursor: pointer;
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<center>
			<!-- disabled="disabled" 禁用输入框 -->
			<input type="" name="" id="showNum" value="0" disabled="disabled" />
			<table bordercolor="blue" border="1" cellspacing="0" cellpadding="" height="600px" width="500px">

				<tr>
					<td id="clear">C</td>
					<td id="del">退格</td>
					<td>%</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 class="num">.</td>
					<td id="result">=</td>
				</tr>
			</table>
		</center>
	</body>
	<script type="text/javascript">
		//1.把所有的数字键归为一类  class="num"
		//2.把是所有的运算符归为一类 class="ysf"
		//3.其余的单独加id
		//先考虑简单的运算，我先点一个数字，再点一个运算符，再点一个数字，然后再点等号算出结果
		//我们得定义三个变量，来保存第一个数字，第二个数字和，运算符
		var numValue1 = '';
		var numValue2 = '';
		var opr = '';

		//获取显示结果的标签对象
		var showResult = document.getElementById("showNum");

		//获取所有的数字键，给他绑定点击事件
		var nums = document.getElementsByClassName("num");
		for (let i = 0; i < nums.length; i++) {
			nums[i].onclick = function() {
				//取出标签之间的内容，展示到显示框
				numValue1 += this.innerText; //+= 追加
				showResult.value = numValue1;
			}
		}
		//简单的运算，我先点一个数字，再点一个运算符，再点一个数字，然后再点等号算出结果
		//思路：当用点击了运算符，我把第一个数，给第二个数，把第一个数清空，让他接收下一个数。
		//获取所有的运算符，给他绑定点击事件
		var oprs = document.getElementsByClassName("ysf");
		for (let i = 0; i < oprs.length; i++) {
			oprs[i].onclick = function() {
				if(numValue2==''){
					//我把第一个数，给第二个数
					numValue2 = numValue1;
					//把第一个数清空，让他接收下一个数
					numValue1 = '';
					//保存运算符
					opr = this.innerText;
				}else{
					//你点=号也行，点运算符也行、如果你继续点运算符，那就把上一次的结果算出来赋值给numValue2
					//再把第一个数清空，让他接收下一个数。
					resultFun();
					//保存运算符
					opr = this.innerText;
				}
				
			}
		}

		//归零键
		document.getElementById("clear").onclick = function() {
			numValue1 = '';
			numValue2 = '';
			opr = '';
			showResult.value = '0';
		}

		//退格键
		document.getElementById("del").onclick = function() {
			if (numValue1.length > 1) {
				numValue1 = numValue1.substring(0, numValue1.length - 1);
				showResult.value = numValue1;
			}

			/* else if(numValue1.length==1){
				numValue1='0';
				showResult.value=numValue1;
			} */

		}

		//点击=
		document.getElementById("result").onclick = function() {
			//抽取一个方法，因为我还要复用
			resultFun();
		}

		//计算结果
		function resultFun() {
			//把接收到的两个字符串数字，转换成数字。
			var one = Number(numValue2);
			var two = Number(numValue1);
			var r = null; //保存运算完的结果
			switch (opr) {
				case '+':
					r = one + two;
					break;
				case '-':
					r = one - two;
					break;
				case '*':
					r = one * two;
					break;
				case '/':
					//判断除数不能为0
					if(two==0){
						alert("除数不能为0!");
						//重置变量
						numValue1 = '';
						numValue2 = '';
						opr = '';
						showResult.value = '0';
						return;
					}else{
						r = one / two;
					}
					break;
			}
			numValue2=r;
			numValue1='';
			showResult.value =r.toFixed(5)*1;//保留小数点后面5位
		}
		
		
	</script>
</html>

7.轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 230px;
				height: 320px;
				border: 1px black solid;
				/* 溢出层隐藏 */
				overflow: hidden;
			}

			#content {
				width: 920px;
				height: 320px;
				/* margin-left: -460px; */
				/* 加个过渡动画 */
				transition: margin-left 1s;
			}

			#d1 {
				width: 230px;
				height: 320px;
				background-image: url(img/main02_centent_01.png);
				float: left;
			}

			#d2 {
				width: 230px;
				height: 320px;
				background-image: url(img/main02_centent_02.png);
				float: left;
			}

			#d3 {
				width: 230px;
				height: 320px;
				background-image: url(img/main02_centent_03.png);
				float: left;
			}

			#d4 {
				width: 230px;
				height: 320px;
				background-image: url(img/main02_centent_04.png);
				float: left;
			}
			
			#dots {
				position: absolute;
				width: 230px;
				margin-top: 300px;
				margin-left: auto;
				/* border: 1px black solid; */
				display: flex;
				justify-content:center;
			}
			
			.dot {
				width: 14px;
				height: 14px;
				border-radius: 7px;
				float: left;
				margin-left: 10px;
				font-size: 10px;
				color: white;
				background: grey;
				text-align: center;
				
			}
			.dot:hover{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<!-- 观察口，宽高和图片一样 -->
		<div id="box" onmouseover="stopScorll()" onmouseout="startScorll()">
			<!-- 小圆点，指示器 -->
			<div id="dots">
				<div id="dot1" class="dot">1</div>
				<div id="dot2" class="dot">2</div>
				<div id="dot3" class="dot">3</div>
				<div id="dot4" class="dot">4</div>
			</div>
			<div id="content">
				<div id="d1"></div>
				<div id="d2"></div>
				<div id="d3"></div>
				<div id="d4"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var timerID = null;
		var content = document.getElementById("content");
		//指示器
		var dots=document.getElementsByClassName("dot");
		//一进来第一个先变红
		dots[0].style.background="red";
		//滚动图片
		//0 -230 -460 -690
		var count = 0;

		function lunBo() {
			count++;
			if (count >= 4) {
				count = 0;
			}
			//排他思想，让当前选中的变红。
			clearColor();
			//设置当前的指示器
			dots[count].style.background="red";
			content.style.marginLeft = (-230 * count) + "px";
		}
		//循环定时器
		 timerID = setInterval(lunBo, 2000);

		//鼠标移上，停止滚动
		function stopScorll() {
			clearInterval(timerID);
		}

		function startScorll() {
			timerID = setInterval(lunBo, 2000);
		}
		
		//清除指示器的背景颜色
		function clearColor() {
			for(let i=0;i<dots.length;i++){
				dots[i].style.background="grey";
			}
		}
	
	</script>
</html>