## 第2天 ##
### 1.复习1.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:200px; height:150px; background:pink; position:absolute; left:40%; top:40%; display: none;}
</style>
</head>
<body>
<div id="box">
<button>确定</button>
<button>取消</button>
</div>
<!-- <form action="./1.php">
<button>提交</button>
</form> -->
<button onclick="alert(1)">点击</button>
<!-- void() 把这个标签当成一个普通的标签使用 -->
<a href="javascript:void()" >百度</a>
<!-- 通过return false 阻止a标签的默认行为 -->
<a href="http://www.baidu.com" onclick="return false">百度</a>
<a href="./1.php?a=del&id=1" onclick="return confirm('数据无价，谨慎操作')">删除</a>
<a href="./1.php?a=del&id=1" onclick="return check()">删除</a>
</body>
<script>
/*
1.直接写在script标签里
2.通过事件引入js代码
3.通过标签协议引入js
4.在外部引入js文件
js调试工具
1.alert() 终断代码执行
2.document.write() 代码执行完毕后会覆盖整个页面 不能出现在事件
3.console.log() 在控制台输出
4.console.dir() 打印数组
5.document.title
6.debugger 断点
*/
// alert(1);
// res= confirm('测试');
// alert(res);
var str = 'name';
function check()
{
// 1.找对象
var box = document.getElementById('box');
box.style.display = 'block';
return false;
}
</script>
<script src="./js.js"></script>
</html>
~~~
### 2.复习2.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:200px; height:150px; background:pink; position:absolute; left:40%; top:40%; display: none;}
</style>
</head>
<body>
</body>
<script>
/*
☆：严格区分大小写
流程控制
分支
else if
swicth() 类型要严格匹配
循环
没有foreach
有for-in
for(key in obj)
运算符
+
数学运算 两边都是数字的时候
字符串拼接 任何一边是字符串就是拼接
+=
对象访问
. 相当于的 obj.name
[] 可以解析变量 obj[name] obj['name']
; 命令执行符
换行
定时器
一次性
setTimeout()
clearTimeout()
周期性
setInterval()
clearInterval()
*/
name = 'jack';
age = 18;
</script>
<script src="./js.js"></script>
</html>
~~~
### 3.全选-反选.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<span></span>
<b></b>
</div>
<input type="checkbox" checked="true">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<input type="checkbox">I Love You<br>
<!-- <button onclick="select(true)">全选</button>
<button onclick="select(false)">全不选</button>
<button onclick="fanxuan();">反选</button> -->
<button onclick="get(1)">全选</button>
<button onclick="get(2)">全不选</button>
<button onclick="get(3);">反选</button>
</body>
<script>
//javascript特效本质
//找对象 改属性
//Id: docuemnt.getElementById(); 就是一个对象
//标签名 document.getElementsByTagName('tr') 数组
var inputs = document.getElementsByTagName('input');
// console.dir(inputs);
function select(mark)
{
for(i=0; i<inputs.length; i++) {
inputs[i].checked = mark;
}
}
function fanxuan()
{
for(i=0; i<inputs.length; i++) {
inputs[i].checked = !inputs[i].checked;
}
}
function get(num)
{
switch(num) {
case 1:
for(i=0; i<inputs.length; i++) {
inputs[i].checked = true;
}
break;
case 2:
for(i=0; i<inputs.length; i++) {
inputs[i].checked = false;
}
break;
case 3:
for(i=0; i<inputs.length; i++) {
inputs[i].checked = !inputs[i].checked;
}
break;
}
}
</script>
</html>
~~~
### 4.跑马灯.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<font size="6" id="myfont">java<font color='red'>s</font>cript跑马灯</font>
</body>
<script>
//
var str = 'JavaScript跑马灯';
// str = str[4];
// alert(str);
var myfont = document.getElementById('myfont');
// res = str.substr(4,1);
// alert(res);
//定义一个函数，处理我想要的字符串
function getStr(num,str)
{
var tmp = str.substr(0,num);
tmp += '<font color="red" size="7">' + str[num] + '</font>';
tmp += str.substr(num+1);
// alert(tmp);
return tmp;
}
// getStr(3,str);
var num = 0;
setInterval(function(){
if (num >= str.length) num = 0;
myfont.innerHTML = getStr(num,str);
num++;
},100);
</script>
</html>
~~~
### 5.数据类型1.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
数据类型
typeof 查看数据类型
1.bool 布尔型
true fales
2.undefined
undefined 定义变量没有赋值
3.object
☆：null一个特殊的对象 空对象
*/
// var num =10;
// alert(typeof num);
var data = null;
console.log(data);
console.log(typeof data);
</script>
</html>
~~~
### 6.奇葩的number数据类型.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
数据类型
typeof 查看数据类型
1.bool 布尔型
true fales
2.undefined
undefined 定义变量没有赋值
3.object
☆：null一个特殊的对象 空对象
4.number
不分整形跟浮点型
浮点型运算不准确 精度高
Infinity 无限大
*/
// var num =10;
// alert(typeof num);
var data = 10;
data = 10.2;
// alert(0.1+0.2);
//浮点型运算不准确 精度高
// if (0.1+0.2 == 0.3) {
// alert('Y');
// } else {
// alert('N');
// }
//进制
//二进制 数值范围只能在[0-1]
data = 0101;
//八进制
data = 0704;
//十六进制
data = 0xff;
//位运算
//数学计数法
data = 2.3e10; //右移
data = 2.3e-2; //左移
//Infinity 无限大
data = 2/0;
//js中数值最大的
// alert(Number.MAX_VALUE);
//NaN js中一个奇葩的类型 不是一个数的数字
data = 'hello' - 5;
//js中唯一一个连自己都不等于自己的奇葩
// if (NaN == NaN) {
// alert('Y');
// } else {
// alert('N');
// }
//与NaN这个奇葩参与运算，那么你也会感染
data = NaN + 5;
console.log(data);
console.log(typeof data);
</script>
</html>
~~~
### 7.类型转换.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
数据类型
typeof 查看数据类型
1.bool 布尔型
true fales
2.undefined
undefined 定义变量没有赋值
3.object
☆：null一个特殊的对象 空对象
4.number
不分整形跟浮点型
浮点型运算不准确 精度高
Infinity 无限大
*/
//js中的变量必须要先声明在使用
//js也是一门弱类型语言
//类型转换
//Number() 自动转换类型 ()
//isNumber() 判断这个变量是否是一个数
//parseInt() 强制把一个变量转换成整数
//parseFloat() 强制把一个变量转换成浮点数
// var res;
// console.log(res);
data = true;
// res = true + 'true';
// alert(res);
data = 10;
data = 10.2;
data = '10';
data = '10a';
data = null;
data = false;
data = undefined;
data;
// box.style.left = 100px; //NaN + 5 + 'px'
// parseInt(box.style.left)
// res = Number(data);
res = parseInt(data);
console.log(res);
console.log(typeof res);
</script>
</html>
~~~
### 8.字符串.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
数据类型
typeof 查看数据类型
1.bool 布尔型
true fales
2.undefined
undefined 定义变量没有赋值
3.object
☆：null一个特殊的对象 空对象
4.number
不分整形跟浮点型
浮点型运算不准确 精度高
Infinity 无限大
5.string 字符串类型
*/
/*
单引号不解析变量
双引号也不解析变量
如果要解析变量的，拼接
单双引号不能嵌入
解析所有转义符
*/
var num = 10;
var res = 'hel{num}lo';
var res = "hel{num}lo";
// tmp = 'hel' + num + 'lo';
res = 'jack\'father';
res = 'name\r\njack';
console.log(res);
console.log(typeof res);
</script>
</html>
~~~
### 9.对象-函数.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
数据类型
typeof 查看数据类型
1.bool 布尔型
true fales
2.undefined
undefined 定义变量没有赋值
3.object
☆：null一个特殊的对象 空对象
4.number
不分整形跟浮点型
浮点型运算不准确 精度高
Infinity 无限大
5.string 字符串类型
6.function 函数也一种数据类型
*/
//定义一个数组
var list = [1,2,3,5];
//定义一个对象 一般不会这样这样去写 找对象
var obj = {name:'jack',age:18}
//函数也是数据类型 类似字符串 字符串怎么玩 ,函数就可以怎么玩
function test()
{
alert(1);
}
var func = test;
func();
alert(func);
// console.log(obj);
// console.log(typeof obj);
</script>
</html>
~~~
### 10.减速运动.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:100px; height:100px; border-radius:50%; background:pink; position:absolute; left:100px}
</style>
</head>
<body>
<!-- 优先级 -->
<div id="box" style="left:10px"></div>
</body>
<script>
//1.找对象
var box = document.getElementById('box');
//这里只能获取到写在标签内的属性
//alert(box.style.left);
var num = 40;
setInterval(function(){
// num--;
// 摩擦系数
num *= 0.9;
box.style.left = parseInt(box.style.left) + num + 'px';
},100);
</script>
</html>
~~~
### 11.定点停车.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:100px; height:100px; border-radius:50%; background:pink; position:absolute;}
#line{width:1px; height:500px;background:red; position:absolute; left:800px;}
</style>
</head>
<body>
<!-- 优先级 -->
<div id="box" style="left:0px"></div>
<div id="line"></div>
</body>
<script>
//1.找对象
var box = document.getElementById('box');
//这里只能获取到写在标签内的属性
//alert(box.style.left);
var num = 40;
setInterval(function(){
num = (800-parseInt(box.style.left))/50;
num = Math.ceil(num);
document.title = num;
box.style.left = parseInt(box.style.left) + num + 'px';
},100);
</script>
</html>
~~~
### 12.钟摆.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:100px; height:100px; border-radius:50%; background:pink; position:absolute;}
#line{width:1px; height:500px;background:red; position:absolute; left:400px;}
</style>
</head>
<body>
<!-- 优先级 -->
<div id="box" style="left:0px"></div>
<div id="line"></div>
</body>
<script>
//1.找对象
var box = document.getElementById('box');
//这里只能获取到写在标签内的属性
//alert(box.style.left);
var num = 40;
setInterval(function(){
num += (400-parseInt(box.style.left))/1000;
num = Math.ceil(num);
document.title = num;
box.style.left = parseInt(box.style.left) + num + 'px';
},100);
</script>
</html>
~~~
