web前端第十四之运算符等

最新推荐文章于 2023-08-22 18:19:51 发布

思丰百年

最新推荐文章于 2023-08-22 18:19:51 发布

阅读量259

点赞数

分类专栏： web前端开发复习，从头再来文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_39664934/article/details/108264070

版权

web前端开发复习，从头再来专栏收录该内容

22 篇文章 0 订阅

订阅专栏

获取元素的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="box">box盒子1</div>
	<div id="box">id盒子</div>
	<ul id="list">
		<li>列表1</li>
		<li>列表2</li>
		<li>列表3</li>
		<li>列表4</li>
	</ul>
	<div class="box">box盒子2</div>
	<div class="box">box盒子3</div>
	<div class="box">box盒子4</div>


	<script type="text/javascript">
		//获取元素的三种方式
			// 1、通过id获取元素，静态方式
			//相同的id一个页面只能有一个
			//必须是document开头的
		// var oBox=document.getElementById('box');


		// 2、获取文档中的li标签，动态方法获取元素
		var oList=document.getElementById('list');
		var oLis=oList.getElementsByTagName('li');
		// 通过li标签名去获取文档中的元素集合，集合代表多个
		// get  获取
		// Elements 多个元素
		// By通过
		// TagName  标签名称

		// 集合的意义
		// 代表多个元素，length表示个数，或者长度
		// 集合的第一个元素  （集合变量名[0]  以此类推）
		oLis[3].style.color="red";
		// []的     可以变化的

		// 3、通过class类名获取，不推荐直接使用，低版本iE不兼容
		var oBox=document.getElementsByClassName('box');
		// 通过class名字获取元素，获取到的也是一个集合
		oBox[2].style.color="pink";

	</script>
</body>
</html>

简易计算器

只有加减乘除基本操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box input{
			width: 100px;
		}
		.pox input{
			width: 50px;
			height: 50px;
			margin: 12px;
		}
	</style>
</head>
<body>
	<div class="box">
		<input type="text">
		<input type="text">
		<input type="text">
	</div>
	<div class="pox">
		<input type="button" value="+">
		<input type="button" value="-">
		<input type="button" value="*">
		<input type="button" value="/">
		<input type="button" value="%">
	</div>
	<script type="text/javascript">
		// 先获取标签
		var oInput = document.getElementsByTagName('input');

		oInput[3].onclick=function(){
			oInput[2].value=Number(oInput[0].value)+Number(oInput[1].value);
			oInput[0].value="";
			oInput[1].value="";
		}
		oInput[4].onclick=function(){
			oInput[2].value=oInput[0].value-oInput[1].value;
			oInput[0].value="";
			oInput[1].value="";
		}
		oInput[5].onclick=function(){
			oInput[2].value=oInput[0].value*oInput[1].value;
			oInput[0].value="";
			oInput[1].value="";
		}
		oInput[6].onclick=function(){
			oInput[2].value=oInput[0].value/oInput[1].value;
			oInput[0].value="";
			oInput[1].value="";
		}
		oInput[7].onclick=function(){
			oInput[2].value=oInput[0].value%oInput[1].value;
			oInput[0].value="";
			oInput[1].value="";
		}
	</script>
</body>
</html>

比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		//比较运算符
		// >大于与   >=大于等于   <小于   <=小于等于   !=不等于   ==相等   ===全等于   !==不全等
		var num1=10;
		var num2=100;

		console.log(num1>num2);      //false    表示条件不成立
		console.log(num1<num2);		 //true     表示条件成立

		console.log("2">"11");       //true  根据ascii码表进行比较 
		console.log(1>false);        //true  将false转化为0进行比较

		console.log("a">"b");        //false  根据ascii码表进行比较 a==97    b==98
		console.log(num1>=num2);    
		console.log(num1<=num2);     //true

		console.log(num1!=num2);     //true
		console.log(2=="2");         //true
		console.log(2==="2");        //false
		// 相等于和全等于有什么区别？   
		// 相等只要值相等就可以    全等必须是值和数据类型都相等才可以

		console.log(2!="2");         //false
		console.log(2!=="2");        //true
	</script>
</body>
</html>

逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 逻辑运算符
		// &&  逻辑与    一假就假，同真为真 
		// ||  逻辑或    一真就真，同假为假 
		// ！  逻辑非 	 取反

		console.log(2>1 && 3>2)   //true
		console.log(2<1 && 3>2)   //false
		console.log(2<1 && 3<2)   //false

		console.log(2>1 || 3<2)   //true
		console.log(2<1 || 3<2)   //false

		var isBool = true;
		console.log(!isBool)
	</script>
</body>
</html>

流程控制语句

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 流程控制：代码执行的过
		// 分支结构:if语句  else语句
		// 循环结构:for循环语句

		// if语句的语法
		/*
		if(条件){       if如果
			代码块1
		}else{          else否则
			代码块2
		}
		执行过程：先判断条件是否成立(true代表成立，false代表不成立)，如果代码成立就执行代码块一，否则就执行代码块二
		*/
		var age = prompt('请输入你的年龄');
		if(age>18){
			alert("恭喜你成年了,可以去网吧了");
		}else{
			alert("在等等吧")
		}

		
	</script>
</body>
</html>

for循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// for循环语法
		for(var i=0;i<5;i++){
			// 需要执行的代码块
			console.log(i);
		}	

		// for四部曲
		// 1、初始化变量   var i=0;
		// 2、条件判断
		// 3、执行大括号中所有代码
		// 4、条件更新

		// 执行步骤：
		// 第一次执行
		// i==0   0<5 条件成立  执行console.log(i)    i++  相当于i=0+1;
		// 第二次执行
		// i==1   1<5 条件成立  执行console.log(i)    i++  相当于i=1+1;
		// 第三次执行
		// i==2   2<5 条件成立  执行console.log(i)    i++  相当于i=2+1;
		// 第四次执行
		// i==3   3<5 条件成立  执行console.log(i)    i++  相当于i=3+1;
		// 第五次执行
		// i==4   4<5 条件成立  执行console.log(i)    i++  相当于i=4+1;
		// 第六次执行
		// i==5  5<5条件不成立  循环结束
	</script>
</body>
</html>

思丰百年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端第十四之运算符等

获取元素的三种方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="box">box盒子1</div> <div id...
复制链接

扫一扫