运算符分支语句轮播图

最新推荐文章于 2024-07-30 10:56:44 发布

敲代码的皮皮

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量56

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/cc12345_10/article/details/116234716

版权

1.运算符

/*
	++ 自增
	-- 自减
	
	c = a++ 相当于先把原来的a赋值给c，再完成a的自增
	c = ++a 相当于先完成a的自增，再把a自增后的值赋给c
	*/
   var num1 = 10;
   var num2 = num1++;
   console.log('num2',num2);  // num2=10 num1=11
   console.log('num1',num1); // num1=11
   var num3 = ++num1; // num1=12  num3=12
   console.log('num3',num3);
   ++num1;
   num1++; // num1 = num1+1
   console.log('num1',num1); //num1=14
   console.log('num1',num1++); //先输出内容，再++
   console.log('num1',++num1); // num1=16
   
   // 练习
   var k=10;
   var j = (k++)+3; // k++运算的优先级最低 ，先算k+3，此刻的k=10，然后再赋值给j，最后计算k++，本行代码的执行结果是 j=13 k=11
   console.log(j,k);
   
   var m = 10;
   var n = ++m + m++ + m;
   /*
   1.++m m的值变成11，并且让11参与运算
   2.m++ 先取出m的值11，让11参与运算，然后再自增，变成12，随后参与运算
   */ 
   console.log(n,m);
   /*
   a-- --a 跟上述的++操作一样，特性也一样 
   */
  
  var j=10;
  var k = j++ + --j + j-- + ++j;
  console.log(k,j);

2.三目运算符逻辑运算符

 /*
	关系运算符
	> < >= <= == !=(不等于) ===(全等，不仅仅比较值的大小，还比较数据类型是否一样)
	关系表达式返回结果都是true或者false
	=== 不仅仅比较值的大小，还比较数据类型是否一样
	== 仅仅比较值的大小
	*/
    var a = 3 < 5;
    console.log(a);

    if (3 < 5) {
        console.log('3真的小于5');
    } else {
        console.log('3不小于5');
    }

    var str = '123';
    var num1 = 123;

    if (str == num1) {
        console.log('==相等');
    } else {
        console.log('==不相等');
    }

    if (str === num1) {
        console.log('===相等');
    } else {
        console.log('===不相等');
    }

    /*
    逻辑运算符
    或 || : 有一个为真即为真(真即为 true)
    与(且) && : 同真为真(所有表达式必须都为真的时候，结果才是true)
    非 ! : 取反 (非真 !true 为 false)
   
    逻辑表达式的返回值，可以为true和false，也可以是具体的数值
    非0即为真
    */
    if (4 > 5 || 6 > 5) {
        console.log('十步杀一人');
    }
    if (4 > 5 && 6 > 5) {
        console.log('十步杀两人');
    }
    console.log(4 > 5 && 6 > 5);
    if (-1) { // -1是真
        console.log('十步杀三人');
    }
    console.log(!(4 > 5 && 6 > 5));

    5 > 7 || console.log('古来征战几人回') || 5 || console.log('古来征战没人回');
    /*
    逻辑运算符的短路写法
    表达式1||表达式2||表达式3....||表达式n 从左至右遇到第一个表示的结果为true的时候，后面的表达式均不执行
    表达式1&&表达式2&&表达式3....&&表达式n 从左至右遇到第一个表示的结果为false的时候，后面的表达式均不执行
    */
    var num1 = 10;
    var num2 = 5 > 3 && num1++;
    console.log(num2, num1);
    /*
  1. !优先级很高，比算术运算符都高
  2. boolean和number都参与运算的时候，会把boolean转化为number,他是一个隐式转化,其中true转为1，false转化为0
	
  */
    console.log('************************');
    console.log(3 + !4);
    console.log('************************');
    console.log(!true);
    console.log(true + 10);
    console.log(false + 10);

    /*
    运算符的优先级
    1.() 小括号
    2.!
    3.算术运算符
    4.关系运算符
    5.逻辑运算符
    6.赋值运算符
  
    赋值运算符
    = += -= *= /=
  
    a+=1 => a=a+1
    */
    var num3 = 10;
    num3 += 1; // num3 = num3 + 1;
    console.log(num3);
    // += 常用

    // 于字符串的拼接
    var str = '饕餮';
    str += '赑屃';
    str += '霸下';
    str += '睚眦';
    console.log(str);

    var num4 = 100;
    num4 -= 50;
    console.log(num4);

    var num5 = 10;
    num5 *= 50;
    console.log(num5);

    var num6 = 100;
    num6 /= 50;
    console.log(num6);

    /**
     显示转换
     1.转为string   String(内容)
     2.转为number   Number(内容)
     3.转为boolean  Boolean(内容) , 非0 非''(空字符串) 非null 非undefined 非NaN 都是true，否则为false 
     
     空字符串是 '',空格也算字符 '     ' 不是空字符串
     
     */
    var num7 = 123;
    console.log(typeof String(num7));
    var str1 = Number('阎婆惜');
    console.log(typeof str1);

    var bol1 = Boolean(0);
    var bol2 = Boolean(undefined);
    var bol3 = Boolean('胡三');
    var bol4 = Boolean(NaN);
    var bol5 = Boolean(str1);
    console.log(bol1, bol2, bol3, bol4, bol5);

    /*
    三目运算符 
    a?b:c 当a为真，则执行b，当a不为真，则执行c
    */
    5 < 4 ? console.log('真') : console.log('假');
    console.log(3 > 2 ? 0 : 1);

3.获取元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取元素</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#wp {
				width:200px;
				height: 200px;
				background: #04BE02;
				margin: 100px auto;
				font-size:100px;
				text-align: center;
				line-height: 200px;
				color: #ff0;
				transition: all 1s;
			}
		</style>
	</head>
	<body>
		<div id="wp">甜</div>
		<input type="text" id="txt" value="" />
		<button type="button" id="btn">旋转</button>
		<ul id="list1">
			<li>1</li>
			<li class="aa">2</li>
			<li class="aa">3</li>
			<li class="aa">4</li>
			<li>5</li>
		</ul>
		<ul id="list2">
			<li class="aa">一</li>
			<li class="aa">二</li>
			<li class="aa">三</li>
			<li>四</li>
			<li>五</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	/*
	通过id获取元素
		document.getElementById(元素id)
	*/
   var wp = document.getElementById("wp");
   var txt = document.getElementById("txt");
   var btn = document.getElementById("btn");
   
   btn.οnclick=function(){
	   wp.style.transform = 'rotate('+txt.value+'deg)';
	   // wp.style.width = '300px';
   };
   /*
   获取元素的第二种方法
   document.getElementsByTagName('元素的标签名')
   
   特性
   1.调用对象可以是document之外的对象
	如果是document调用该方法，则获取当前页面所有的对应名称的标签
	如果是别的对象调用该方法，则获取的是当前对象下所有对应名称的标签
   2.获取到的元素可能为多个
   3.该方法的返回值是一个数组，可以通过数组方法获取相应的元素
   */
	var li = document.getElementsByTagName('li');
	console.log(li);
	
	var list = document.getElementById("list2");
	var tow = list.getElementsByTagName('li');
	console.log(tow);
	// 数组的下标从0开始计算，获取具体元素 arr[下标]
	var arr = ['西施','貂蝉','王昭君','杨玉环'];
	console.log(arr[1]);
	console.log(tow[2]);
	
	/*
	获取元素的第三种方法
	document.getElementsByClassName('元素的类名')
	IE 6/7/8 不支持
	
	特点和getElementsByTagName一致
	*/
   var aa = document.getElementsByClassName('aa');
   console.log(aa, aa[4]);
   
	
</script>

4.轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.wp {
				width:800px;
				height: 600px;
				border:1px #f00 solid;
				margin:0 auto;
				overflow: hidden;
			}
			.img-box {
				height: 600px;
				width:3200px;
				display: flex;
				transition: all 1s;
			}
			.img-box img {
				width:800px;
				height: 600px;
				display: block;
			}
			.btn-box {
				display: flex;
				justify-content: center;
				padding-top: 50px;
			}
			.btn-box button {
				display: block;
				width:60px;
				height:30px;
				margin:0 40px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="wp">
			<div class="img-box">
				<img src="images/a.jpg" >
				<img src="images/b.jpg" >
				<img src="images/c.jpg" >
				<img src="images/d.jpg" >
			</div>
		</div>
		<div class="btn-box">
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	var imgs = document.getElementsByClassName('img-box');
	var img = imgs[0];
	var btns = document.getElementsByTagName('button');
	btns[0].onclick = function(){
		img.style.transform = 'translateX(0)';
	};
	btns[1].onclick = function(){
		img.style.transform = 'translateX(-800px)';
	};
	btns[2].onclick = function(){
		img.style.transform = 'translateX(-1600px)';
	};
	btns[3].onclick = function(){
		img.style.transform = 'translateX(-2400px)';
	};
</script>

5.分支语句

/*
	程序结构
	1.基本结构(按照顺序执行)
	2.分支结构(按照分支语句执行)
	3.循环结构(按照循环语句执行)
		
	分支语句
	if(判断条件){
		只有当判断条件成立的时候，当前花括号中的代码才会执行，当条件不满足的时候，就会跳过当前花括号中的代码，继续往下执行
	}
	
	if(判断条件){
		
	}else{
		只有当判断条件不成立的时候，当前花括号中的代码才会执行
	}
	
	if 可以单独使用，而else不行，else必须结合if一起使用，作用是当if不成立的时候执行
	*/ 
   if(8>6){
	   console.log('成立');
   }else{
	   console.log('不成立');
   }
   // if 的级联操作 if(){}else if(){}...else{}
   var score = 60;
   if(score>=90){
	   console.log('优秀');
   }else if(score>=80){
	   console.log('良好');
   }else if(score>=70){
	   console.log('中等');
   }else if(score>=60){
	   console.log('及格');
   }else{
	   console.log('劝退');
   }
   
   var one = document.getElementById("one");
   var tow = document.getElementById("tow");
   var btn = document.getElementById("btn");
   btn.onclick = function(){
	   var val1 = Number(one.value);
	   var val2 = Number(tow.value);
	   if(val1>val2){
		   alert('最大数是'+val1);
	   }else{
		   alert('最大数是'+val2);
	   }
   };
   
   // 可输入弹框
   // var pto = prompt('请输入密码');
   // console.log(pto);

敲代码的皮皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运算符分支语句轮播图

1.运算符/* ++ 自增 -- 自减 c = a++ 相当于先把原来的a赋值给c，再完成a的自增 c = ++a 相当于先完成a的自增，再把a自增后的值赋给c */ var num1 = 10; var num2 = num1++; console.log('num2',num2); // num2=10 num1=11 console.log('num1',num1); // num1=11 var num3 = ++num1; // num1=12 n
复制链接

扫一扫