算数运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//算数运算符：+，-，*，/，%，++，--
// 数和数的运算
var nnu1 = 5;
var nnu2 = 2;
// console.log(nnu1 + nnu2); //7
// console.log(nnu1 - nnu2);//3
// console.log(nnu1 * nnu2);//10
// console.log(nnu1 / nnu2);//2.5
// console.log(nnu1 % nnu2);//1
//数和字符运行
str = '2';
// console.log(nnu1 + str); //52 这里的 + 号为字符串拼接
// console.log(nnu1 - str);//3
// console.log(nnu1 * str);//10
// console.log(nnu1 / str);//2.5
// console.log(nnu1 % str);//1
//数和其他数据类型的运算
// console.log(nnu1 + true); //6 true 是 1
// console.log(nnu1 - false);//5 false 是0
// console.log(nnu1 + null);//5 unll 空 也是0
// console.log(nnu1 - undefined);//null 和未定义运行 都得 null
// 自增 ++ ，自减--
var num3 = 5;
// console.log(num3++);//5 先返回 num3 的值 再开始运算，所以这里的值是 num3 未自增前的值
// console.log(num3--);//6 先返回 num3 的值 再开始运算，所以这里的值是 num3 未自假前的值
// console.log(++num3);//6 自增后返回值
// console.log(--num3);//5 自减后返回值
</script>
</body>
</html>
赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//赋值运算符 =，+=，-=，*=，/=
var a = 5; //5赋值给 a
console.log(a)
a += 1; // a = a+1
console.log(a);
a -= 2; //a = a-2
console.log(a);
a *= 2; // a = a*2
console.log(a);
a /= 4; // a = a/4
</script>
</body>
</html>
逻辑运算符
逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 逻辑运算符 && (与) ||（或） ！（非）
console.log(10 && 0 &&5);//0 与可以认为乘法运算 有0得0
console.log(10&& undefined &&5);// undefined 假
console.log(10 || 0 ||5)// 或 可以认为是加法运算 全0得0
console.log(!false);// 取反
console.log(!0);// 取反
</script>
</body>
</html>
比较运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 比较运算符 <>= =< => != == ===
var num = 5;
var str = '5';
if (num === str){ // === == 的用法
console.log('数据类型和值都相等')
}else if(num == str){
console.log('只要值相等')
}else {
console.log('都不相等')
}
</script>
</body>
</html>
控制流程:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var name = '小白';
if(name === '小白'){
console.log(name+'小狗')
}else {
console.log(name+'蜡笔小新')
}
//可能写成三目运算：
name === '小白'? console.log(name+'小狗'): console.log(name+'蜡笔小新');
// 条件 如果成立 就 不成立 就
// 多层
var num = 5;
var str = '5';
if (num === str){ // === == 的用法
console.log('数据类型和值都相等')
}else if(num == str){
console.log('只要值相等')
}else {
console.log('都不相等')
}
//switch
switch (name){
case '小白':
console.log('是小狗');
break
case '蜡笔小新':
console.log('是小孩');
break
default:
console.log('没一个配的上，就走这边')
}
</script>
</body>
</html>
循环与鼠标点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none; //去点
}
li{
height: 20px;
width: 60px;
background: skyblue;
float: left;
margin-left: 20px;
text-align: center; /*水平剧中*/
cursor: pointer; /* 小手*/
}
</style>
</head>
<body>
<ul>
<li>地衣章</li>
<li>地饿章</li>
<li>地山章</li>
<li>地事章</li>
</ul>
<script>
var btn = document.getElementsByTagName('li');
//用 let 换 var 使得 i 有函数作用域
// for(let i=0; i<btn.length; i++){
// // console.log(i)
// btn[i].onclick=function () {
// console.log(i)
// }
// }
// 用 var 实现
for(var i=0; i<btn.length; i++){
// console.log(i);
btn[i].nu = i ; // 给没个 li 添加属性
btn[i].onclick=function () {
console.log(this.nu) //this.nu = btn[i]
}
}
</script>
</body>
</html>