## 第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>
~~~
