潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)
算数运算符
<!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>
while do while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// for( var i=0; i<10; i++ ){
// console.log(i)
// } // for 循环流程
// var i=0;
// for(;i<10;){
// console.log(i);
// i++;
// } // while 循环流程
// var i=0;
// while (i<10){
// console.log(i);
// i++;
// } // do while
var i=0;
do{
console.log(i);
i++;
} while (i<10); </script>
</body>
</html>
字符串方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var str = 'a b c'; // length 方法 寡不敌众串长度
console.log(str.length); //5 // 下标
// console.log(str[0]); //a // indexOf
// console.log(str.indexOf('a')) ; // 获取下标 第一个 a 的下标
// console.log(str.indexOf('a',0)) ; // 获取下标 从第 0 个 a 的下标
// console.log(str.indexOf('a',)) ; // 如果没有，返回 -1 //split 切割
console.log(str.split('')); //["a", " ", "b", " ", "c"] // 切片 包前不包后，
// console.log(str.substring(0,3)); //a b 如果有 -数，将视为0
// console.log(str.substring(3,0)); //a b 如果有 -数，将视为0
// console.log(str.substring(2)); //b c 从2 到最末尾 // console.log(str.slice(0,3)); //a b 如果有 -数，将视为0
// console.log(str.slice(0,-1)); // -数，从右往前数，
// console.log(str.slice(2)); //b c 从2 到最末尾
console.log(str.slice(-2)); //c 从2 到最末尾
</script>
</body>
</html>
数组方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = [1,2,3,4,5,6];
// var b = new Array(); //length
// console.log(a.length); //下标
// console.log(a[2]); //赋值
a[2] = 'aaa';
// console.log(a); //后加
// a.push('bb'); //前加
// a.unshift('cc'); //删除 后
// a.pop('bb'); ////删除 前
// a.shift('cc'); ////删除 指定
var x = ['a','b','c','d','e'];
// console.log(x.splice(2)); //["c", "d", "e"] 这些被删除
// console.log(x); //["a", "b"] // console.log(x.splice(1,2)); //["b", "c"] 从1到2 被删
// console.log(x); //["a", "d", "e"] // console.log(x.splice(1,2,'ppp','qqq')); //["b", "c"] 从1到2 被删 在删掉的地方添加 ,'ppp','qqq'....
// console.log(x); // ["a", "ppp", "qqq", "d", "e"] // join 拼接
// console.log(x.join('+')); // a+b+c+d+e
// c(x.join('')) ; // abcde //排序
var arr = [0,-5,6,-8];
//ASCII 排序
// console.log(arr.sort()); //[-5, -8, 0, 6]
// console.log(arr.reverse()); //[6, 0, -8, -5]
// 数学中的正常排序
arr.sort(function(a,b){
// return a-b; //正序
return b-a; // 反序
});
console.log(arr); // [-8, -5, 0, 6] [6, 0, -5, -8] </script>
</body>
</html>
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none; /*去点*/
}
.a{
height: 20px;
width: 60px;
background: skyblue;
float: left;
margin-left: 20px;
text-align: center; /*水平剧中*/
cursor: pointer; /* 小手*/
}
.fu{
height: 230px;
width: 800px;
/*background:black;*/
margin: 100px auto;
position: relative; /*相对定位*/
} img{
height: 200px;
width: 800px;
/*margin: 30px auto;*/
position: absolute; /*绝对定位*/
left: 0px;
top: 30px;
display: none;
}
</style>
</head>
<body>
<div class="fu">
<ul>
<li class="a">地衣章</li>
<li class="a">地饿章</li>
<li class="a">地山章</li>
<li class="a">地事章</li>
</ul>
<ul class="pic">
<li><img style="display: block" src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li>
</ul>
</div>
<script>
var btn = document.getElementsByClassName('a');
var m = document.getElementsByTagName('img');
for(let i=0; i<btn.length; i++){
// console.log(i);
btn[i].onclick=function () {
m[i].style.display='block';
for(let k=0; k<btn.length; k++){
m[k].style.display='none'; // 不显示
if (k == i){ // 如果 按下 的 K,I 相等则 显示
m[k].style.display='block';
}
}
}
} </script> </body>
</html>
潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)的更多相关文章
- 潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
JS 引入方式 在 HTML 中写入 写在 的标签里 <script> </script>推荐 放在 </body> 结束之前 <!DOCTYPE html& ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...
- 潭州课堂25班：Ph201805201 python 操作数据库 第五课 (课堂笔记)
一 用 python 操作 mysql 1,导入 pymysql 2,检查配置文件, 3,端口转发 如果 python 在本机,数据库在远程,或虚拟机则需要 4用 python 连接 # -*- co ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- 手机端的1px边框如何实现
(1).把边框设置为absolute,使用after,定义宽度为1px(mixin.styl) (2).通过@media,判断不同的dpi,来改变相应的Y轴宽度(base.styl),定义公共clas ...
- process.cwd()与__dirname的区别
process.cwd() 是当前执行node命令时候的文件夹地址 ——工作目录,保证了文件在不同的目录下执行时,路径始终不变__dirname 是被执行的js 文件的地址 ——文件所在目录 Node ...
- java多线程快速入门（二）
通过继承Thread类来实行多线程 package com.cppdy; //通过继承Thread类来实行多线程 class MyThread extends Thread{ @Override pu ...
- LeetCode（48）：旋转图像
Medium! 题目描述: 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转 ...
- 【python】xsspider零碎知识点
1.提取url信息 urlparse() from urlparse import urlparse url = "http://scrapy-chs.readthedocs.io/zh_C ...
- java StringTokenizer
在java引入正则表达式和Scanner类之前分割字符串的唯一方法是使用StringTokenizer来分词,不过现在有了正则表达式和Scanner类我们可以使用更加简单更加简洁的方式来完成同样的工作 ...
- VS2008/2005 MFC程序调试经验
我的VS2008不知道是有bug还是自己的问题,很多时候变量定义后CTRL+F5运行却没反应,一定要“生成解决方案”下才行? 1.没有可用于当前位置的源代码 将工具->选项->调试-> ...
- 怎样在win7 IIS中部署网站？
IIS作为微软web服务器的平台,可以轻松的部署网站,让网站轻而易举的搭建成功,那么如何在IIS中部署一个网站呢,下面就跟小编一起学习一下吧. 第一步:发布IIS文件 1:发布你所要在IIS上部署的网 ...
- python 全栈开发，Day25(复习,序列化模块json,pickle,shelve,hashlib模块)
一.复习 反射 必须会 必须能看懂 必须知道在哪儿用 hasattr getattr setattr delattr内置方法 必须能看懂 能用尽量用__len__ len(obj)的结果依赖于obj. ...
- Android Handler的内存泄露问题+解决方案
谈谈handler的内存泄露问题 再来看看我们的新建Handler的代码: private Handler mHandler = new Handler() { @Override public vo ...