js基础
1.热身运动
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/希望把某个元素移除你的视线：
1、display:none; 显示为无
2、visibility:hidden; 隐藏
3、width \ height
4、透明度
5、left \ top
6、拿一个白色DIV盖住它
7、margin负值
……
*/
li { list-style:none; }
.lis { width:80px; height:30px; border:1px solid #333; position:relative; }
.lis a { display:block; line-height:30px; text-align:center; text-decoration:none; color:#000; background:#f1f1f1; }
ul ul { padding:0; margin:0; width:140px; border:1px solid #333; position:absolute; top:30px; left:-1px; background:#FF9; display:none; }
ul ul li { text-align:center; line-height:30px; }
</style></head>
<body>
<!-- 导航 -->
<ul>
<li id="lis" class="lis"> <!-- 相对定位 -->
<a id="link" href="#">微博</a>
<ul id="ul1"> <!-- 绝对定位 -->
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
var li = document.getElementById('lis');
var ul = document.getElementById('ul1');
var a = document.getElementById('link');
li.onmouseover = show;
li.onmouseout = hide;
function show(){
ul.style.display = 'block';
a.style.background = 'yellow';
}
function hide(){
ul.style.display = 'none';
a.style.background = '#f1f1f1';
}
// li.onmouseover = function (){
// ul.style.display = 'block';
// a.style.background = 'yellow';
// };
// li.onmouseout = function hide(){
// ul.style.display = 'none';
// a.style.background = '#f1f1f1';
// };
/*
JS中如何获取元素：
1、通过ID名称来获取元素：
document get element by id 'link'
docuemnt.getElementById('link');
2
……
事件：鼠标事件、键盘事件（回车，空格 ）、系统事件、表单事件、自定义事件……
onclick
onmouseover 移入
onmouseout 移出
onmousedown 鼠标按下
onmouseup 鼠标按下离开
onmousemove 就像是鼠标抚摸一样的事件
……
onload 加载完以后执行……
window.onload = 事情(窗口）
img.onload 图片加载完以后执行……
body.onload
……
如何添加事件：
元素.onmouseover
函数：可以理解为-命令，做一些事~~
function abc(){ // 肯定不会主动执行的！
……
}
1、直接调用：abc();
2、事件调用：元素.事件 = 函数名 oDiv.onclick = abc;
function (){} 匿名函数
元素.事件 = function (){};
测试：
alert(1); 带一个确定按钮的警告框
alert('ok'); 'ok' 字符串
alert("ok");
变量：
var li = document.getElementById('lis');
var num = 123;
var name = 'leo';
*/
</script></body></html>
第01课：属性操作、图片切换、短信发送模拟
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
HTML 的属性操作：读、写
属性名：属性值：
读操作：获取、找到
元素.属性名
写操作：“添加”、替换、修改
元素.属性名 = 新的值
oP.innerHTML => 读取p里面所有的html代码
oP.innerHTML = 123; => 替换p里面所有的html代码
oP.innerHTML=<input type="button" value="按钮"/> 页面会出现按钮
*/
2.属性操作的注意事项
1. oP.style.fontSize=num+'px';
oP.class='right' 错了 class 保留字，关键字： var function
class->className oP.className='right'
2.所有的相对路径都别拿来判断
img src
href='1.css' href='html/index.html'
color: red #fff rgb(250,0,0) 浏览器返回值不一样
innerHTML别拿来做判断
3.oInp.type='text'; oInp.type='button'; IE6,IE7,IE8不支持，会报错
4.float的兼容性问题
oDiv.style.styleFloat='left'; IE（ styleFloat）
oDiv.style.cssFloat='left'; 非IE（ cssFloat）
可以.left{float:left;}避免这个问题
5.【】的使用
oDiv.style.width=oVal.value; 后面的值不能变
oDiv.style[oAttr.value]=200px; [ ]里面可以是width，height；
oDiv.style['width']
js中允许“.”替换成“[ ]”
oBtn.onclick=function(){ }-》oBtn['onclick']=function(){ }
var oAttr=document['getElementById']('attr');->var oAttr=document.getElementById('attr');
6.条件判断 if
if(){} 在做这事之前，有个条件
if(){}else{} 2件事，根据条件，选一个来做
if(){}else if(){}else if(){}else if(){}
if(){}else if(){}else if(){}else if(){}else{}
// alert( arr[arr.length-1] ); // 最后一个
第02课：for应用、this关键字
1.动态方法（ById）与静态方法（ByTagName）
#list {} var oUl = document.getElementById('list'); 静态方法
li {} document.getElementsByTagName('li'); 动态方法
#list li {} var aLi = oUl.getElementsByTagName('li');
// aLi => [ li, li, li ] 元素的集合
aLi.length 3
aLi[0]
// 在用 TagName 的时候，必须要加上：[]
区别
1.Id前面只能是document，TagName既可以是document又可以是别的元素
2.Id只能找一个object，TagName是一堆array，必须要用到【】；
3.网页后面动态生成的东西，id找不到，TagName可以找到
<script>
window.onload = function (){
document.title=123
document.body.innerHTML=123
var aBtn = document.getElementsByTagName('input');
// alert(aBtn.length);
document.body.innerHTML = '<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />';
// alert(aBtn.length);
};
</script></head>
<body></body>
2.for循环
var len=arr.length；比如3 这样就只是计算一次
for( var i=0; i<len; i++ ){ 鉴于性能考虑，这里不要写成aLi.length，i++一次，都要去计算一次。
aLi[i].innerHTML = arr[i];
aLi[i].onclick = function (){
// alert(i); i => 3
}; i在for里面包了个函数，函数里面出现个i，就为len，除非用闭包或其他手段
}
性能考虑
var str = '';
for( var i=0; i<6000; i++ ){
// document.body.innerHTML += '<input type="button" value="按钮" />'; 这里每一次都要先去页面body里面去找，特别慢。
str += '<input type="button" value="按钮" />';
}
document.body.innerHTML = str; 只和页面发生一次 特别快
3.二维数组
window.onload = function (){
var oUl = document.getElementById('list'); 先找到总的ul
var aUl = oUl.getElementsByTagName('ul'); 再找到UL里面的ul
var len = aUl.length;
var aLi = null; // 空
for( var i=0; i<len; i++ ){
aLi = aUl[i].getElementsByTagName('li'); 找到第一个ul里的li
for( var j=0; j<aLi.length; j++ ){
aLi[j].style.border = '1px solid red'; 找到第一个ul里的第一个li
}
}
};
</script></head><body>
<ul id="list">
<li>
<h2>我的好友</h2>
<ul><li>莫涛</li><li>张森</li><li>杜鹏</li> </ul>
</li>
<li><ol><li>no</li><li>no</li><li>no</li></ol></li>
<li>
<h2>我的坏友</h2>
<ul><li>莫小涛</li><li>张小森</li> </ul>
</li>
<li><ol><li>no</li><li>no</li><li>no</li></ol></li>
<li>
<h2>我的黑名单</h2>
<ul><li>莫张</li> </ul>
</li>
</ul>
</body></html>
3.行内样式（oDiv.style.width = '100px';oDiv.style.cssText = ''; ）
<style>div { width:100px; height:100px; border:1px solid #333; }</style>
</head><body>
<div id="div1" style="color:red;">123</div>
<input id="btn1" type="button" value="按钮" />
<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');
oDiv.onclick = function (){
// 写的都是是行内样式
oDiv.style.cssText = 'width:300px; height:200px; ';
oDiv.style.width = '200px';
};
oBtn.onclick = function (){
// oDiv.style.width = '100px';
oDiv.style.cssText = '';
// 直接清空了所有行内样式，只有原来的css文件样式
};
</script></body>
3.自动生成li
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('list');
var arr = [
'山西省委附近多次爆炸 官方称尚不确定是恐怖袭击',
'甘肃张掖明令禁止转基因 书记:无力辨别只能禁止',
'多地制定雾霾预案限行限排被批治标不治本',
'韩媒抱怨中国雾霾侵袭韩国 称其为"黑色灾难" ',
'伊朗革命卫队高官在叙利亚当"志愿者"被杀(图)'
];
/*思路：
1、按钮找麻烦 （用户体验不太好）
2、先清空，再生成
3、判断*/
var onOff = true;
oBtn.onclick = function (){
// oBtn.disabled = true;
// oBtn.style.display = 'none'; 按钮找麻烦
// oUl.innerHTML = ''; 先清空，再生成
if( onOff ) {
for( var i=0; i<arr.length; i++ ){
oUl.innerHTML += '<li>' + arr[i] + '</li>';
}
}
onOff = false; 判断是否已经有了5条新闻
};
};
</script></head><body>
<input id="btn1" type="button" value="自动生成5条新闻" />
<ul id="list" style="border:1px solid red;"></ul>
</body>
3.this
// this : 这个
// this： 指的是调用 当前 方法（函数）的那个对象
function fn1(){
alert(this);
}
1.fn1(); this => window fn1();可以说成window.fn1();
2.oDiv.onclick = fn1; this => oDiv
3.oDiv.onclick = function (){
alert(this); this => oDiv
fn1(); fn1() 里的this => window window调用
};
4.<div onclick=" alert(this);fn1();"></div> alert里的this是div fn1();里的 this 指的是 window
类似传参
for( var i=0; i<aLi.length; i++ ){
aLi[i].onmouseover = function (){
that = this;
fn1();
};
aLi[i].onmouseout = function (){
this.getElementsByTagName('div')[0].style.display = 'none';
};
}
function fn1(){ 这里的this=》window
that.getElementsByTagName('div')[0].style.display = 'block';
}
第03课：自定义属性、索引值
1.自定义属性
<style>
li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }
</style>
<script>
window.onload = function (){
var aLi = document.getElementsByTagName('li');
// var onOff = true; // 只能控制一组！
for( var i=0; i<aLi.length; i++ ){
aLi[i].onOff = true; 自定义属性（每一个li上面的属性）
aLi[i].onclick = function (){
if ( this.onOff ) {
this.style.background = 'url(img/active.png)';
this.onOff = false;
} else {
this.style.background = 'url(img/normal.png)';
this.onOff = true;
}
};
}
};
</script></head><body>
<ul><li></li><li></li><li></li></ul>
</body></html>
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
var aP = document.getElementsByTagName('p');
// 想建立“匹配”“对应”关系，就用索引值
var arr = [ '莫涛', '张森', '杜鹏' ];
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].index = i; // 自定义属性（索引值）
aBtn[i].onclick = function (){
// alert( i ); 3
// alert( arr[ this.index ] );
this.value = arr[ this.index ];
aP[ this.index ].innerHTML = arr[ this.index ];
};
}
};
</script></head><body>
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
<p>a</p><p>b</p><p>c</p>
</body></html>
2.图片切换
思路----先是写布局，然后是都在加载中，然后初始化，再通过for循环，采用index替换相应的，还有颜色的变换（两种思想）
window.onload = function (){
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
var num = 0;
var oldLi = null;
动态生成li
for( var i=0; i<arrUrl.length; i++ ){
oUl.innerHTML += '<li></li>';
}
oldLi = aLi[num];
// 初始化
oImg.src = arrUrl[num];
oSpan.innerHTML = 1+num+' / '+arrUrl.length;
oP.innerHTML = arrText[num];
aLi[num].className = 'active';
for循环index
for( var i=0; i<aLi.length; i++ ){
aLi[i].index = i; // 索引值
aLi[i].onclick = function (){
oImg.src = arrUrl[ this.index ];
oP.innerHTML = arrText[ this.index ];
oSpan.innerHTML = 1+this.index + ' / '+arrText.length;
// 思路一：全部清空，当前添加 耗性能，拓展性好
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
this.className = 'active';
// 思路二：清空上个，当前添加，增加新的变量
oldLi.className = '';
oldLi = this;
this.className = 'active';
};
}
};
</script></head><body>
<div id="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul></ul>
</div>
</body></html>
第04课：JS数据类型、类型转换
1.JS中的数据类型：数字（NaN）、字符串、布尔、函数、对象(obj、数组[]、josn{}、null)、未定义undefined
2.显式类型转换（强制类型转换）--数字转换：
Number(a)可以转换（是从整体上转换）
1.var a = '+100'; ---100
2.var a = ' '; ----0
3.var a= [ 123 ]; ----123
4.var a = null; ----0
5.var a = true; ----1
不能转换的是var json = {}; var u; var a= [ 1，2，3 ]; var a3 = function (){ alert(1); }; -----NaN
parseInt(b,10)（从左往右转换，默认10进制）var b = ' +00200px1323232'; -----200
parseFloat(b)（从左往右转换，认小数点）var c = '12.3.4元'; ----12.3
var num = '200.45';
if( parseInt(num) == parseFloat(num) ){
alert( num + '是整数' );
}else{
alert( num + '是小数' );
}
3.隐式类型转换：
+ 200 + '3' 变成字符串
- * / % '200' - 3 变成数字 197
++ -- 变成数字
> < 数字的比较 、字符串的比较
! 取反 把右边的数据类型转成布尔值
==
1.alert( '10000000' > '9' ); false 其实就是1和9比较，ascII编码
alert( '10000000' > 9); ture 先变成数字了再进行比较
2.alert( '2' == 2 ); ture 自己转换了
3.alert( '2' === 2 ); 类型和数据都相等；不存在隐式类型转换
4.NaN 是 false，一旦写程序中出现：NaN 肯定进行了非法的运算操作
// NaN 与自己都不相等！！
var a = Number('abc');
alert( a === a ); // false
5.isNaN(); 判断某些值是不是数字， 不喜欢数字类型、讨厌数字
.isNaN(NaN); ture
// alert( isNaN( function(){ alert(1) } ) ); = > ture
// alert( isNaN('250') ); 先交给number转换
// Number() '250' => 250 => false
6.var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];
// 作业示意：找到所有的字符串
for ( var i=0; i<arr.length; i++ ) {
if ( typeof arr[i] === 'string' ) {
alert( arr[i] );
}
}
/*
1、找到arr里所有的数字：-98765, 34, -2, 0, 5
2、找到可以转成数字的：'100px', -98765, 34, -2, 0, '300', '23.45元', 5
3、把转成数字以后，最大值判断出来：300
4、把 NaN 所在的位置找出来：1 14 17 19
第05课：函数传参、重用、价格计算
1.函数传递参数
参数=JS的数据类型：数字、字符串、布尔、函数、对象、未定义
传函数
fn3( function ( a ){ alert(a); } );
function fn3( fn ){
fn(100);
}
传对象
fn5( window, document );
function fn5( w, d ){
w.onload = function (){
d.body.innerHTML = 123;
};
}
重用代码：
1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
2、把核心主程序实现，用函数包起来
3、把每组里不同的值找出来，通过传参实现
第06课：作用域、JS预解析机制
1.浏览器：预解析“JS解析器”
1）“找一些东西” ：var function 参数 。。。
a = ...
所有的变量，在正式运行代码之前，都提前赋了一个值：未定义
fn1 = function fn1(){ alert(2); }
所有的函数，在正式运行代码之前，都是整个函数块
JS 的预解析
遇到重名的：只留一个
变量和函数重名了，就只留下函数，因为变量是未定义的
2）逐行解读代码：
表达式：= + - * / % ++ -- ! 参数(也可以改东西)……
表达式可以修改预解析的值！
2.预解析过程----a=未定义-》a=function a (){ alert(2); }-》a=function a (){ alert(4); }
第二步-----开始逐行解读代码，a->function a (){ alert(4); }-》1-》函数不能修改预解析里面的值-》3
alert(a); // function a (){ alert(4); }
var a = 1;
alert(a); // 1
function a (){ alert(2); }
alert(a); // 1
var a = 3;
alert(a); // 3
function a (){ alert(4); }
alert(a); // 3
alert( typeof a ); // number
// a(); // 报错
3.作用域：
// 域：空间、范围、区域……
// 作用：读、写
1）script 全局变量、全局函数
自上而下
<script>var a=1;</script>
<script>alert(a) //1</script>
<script> alert(a) 报错</script>
<script>var a=1; </script>
2）函数
由里到外
1）var a = 1;
function fn1(){
alert(a); // undefined
var a = 2;
}
fn1();
alert(a); //1
2）var a = 1;
function fn1(){
alert(a); // 1
a = 2; 子级预解析没有，逐行解读代码时，会随着作用域链找到父级里的a，并且修改
}
fn1();
alert(a); // 2
3）var a = 1;
function fn1(a){
alert(a); // undefined
a = 2;
}
fn1();
alert(a); // 1
4）var a = 1;
function fn1(a){
alert(a); // 1
a = 2;
}
fn1(a);
alert(a); // 1
3）对象{}
4.if{}火狐下的兼容性问题
alert(a); // 未定义
alert( fn1 ); // 火狐不能对if{}下面的函数进行预解析 报错
if( true ){
var a = 1;
function fn1(){
alert(123);
}
}
第07课：运算符、流程控制
1.
1)var i = 0;
i++;
if( i === 5 ){i = 0;}========i%=5;
2）var s = 3605; // 秒 Math.floor向下取整
alert( Math.floor(s/60) + '分' + s%60 + '秒' );
2 && 与、|| 或、! 否
1) var a = 120<90 && 20;
// alert( a ); // false
var a = 12<90 && 20;
// alert( a ); //20
2）<li><input type="checkbox" checked /></li>
aInp[i].checked = !aInp[i].checked;
等同于
if( aInp[i].checked ) {
aInp[i].checked = false;
} else {
aInp[i].checked = true;
}
3)var str = 'js';
switch( str ){
case 'js' :
alert( 'js' ); break;
case 'html' :
alert( 'html' ); break;
default :
alert( str );
}
4) 120<45 ? alert( '120<45' ) : alert( '120!<45' );
5)for(var i=0; i<6; i++){
if( i == 4 ){
// break; // 跳出 0,1,2,3
continue; // 跳过 0,1,2,3,5
}
alert(i)
}
3.真假的问题：
数据类型-数字（NaN）、字符串、布尔、函数、对象（elem、[]、{}、null）、未定义
真：非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
假：0、NaN、空字符串''、false、不能找到的元素、null、未定义
第08课：return、定时器基础
1.return 返回值 ----数字、字符串、布尔、函数、对象（元素\[]\{}\null）、未定义
1)alert( fn1().length );
function fn1(){
// return 100;
return 'miaov';
}
2)// fn2(20)(10);
function fn2(a){
return function (b){
alert(a+b); // 嘿嘿，我是注释~
};
}
2.return：返回值
1) 函数名+括号：fn1() ==> return 后面的值；
2) 所有函数默认返回值：未定义；
3) return 后面任何代码都不执行了；
3.当函数的参数个数无法确定的时候：用 arguments
1)arguments => [ 1,2,3 ] —— 实参的集合
alert( sum( 1,2,3 ) ); // 6
alert( sum( 1,2,3,4 ) ); // 10
function sum (){
var n = 0;
for( var i=0; i<arguments.length; i++ ){
n += arguments[i];
}
return n;
}
2)var a = 1;
function fn2( a ){
arguments[0] = 3; 相当于a
alert(a); // 3
var a = 2;
alert( arguments[0] ); // 2
}
fn2(a);
alert(a); // 1
第09课：定时器管理、函数封装
1.getComputedStyle( $('div1') ).width --- IE6 7 8 不兼容
$('div1').currentStyle.width ----- IE6 7 8 兼容，标准浏览器不兼容
1）获取到的是计算机（浏览器）计算后的样式
2）background: url() red …… 复合样式（不要获取）
backgroundColor 单一样式（不要用来做判断）
不要有空格
不要获取未设置后的样式：不兼容
3）function getStyle( obj, attr ){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
1.定时器：时间概念
var timer = setInterval( 函数, 毫秒 ); 重复执行（发动机）
clearInterval( timer ); 清除
var timer = setTimeout( 函数, 毫秒 ); 执行一次（炸弹）
clearTimeout( timer );
2. i = 0;
var timer = null;
function fn1(){
i++;
document.title = i;
if( i === 10 ){clearInterval( timer );}
}
timer = setInterval( fn1, 200 );
3.定时器由用户控制，要先关后开
<input type="button" value="换背景吧" />
<input type="button" value="停" />
<script>
var aBtn = document.getElementsByTagName('input');
var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
var timer = null;
var oBody = document.body;
aBtn[0].onclick = function (){
clearInterval( timer ); // null、未定义，要先关后开
timer = setInterval(function(){
oBody.style.background = 'url('+ arrUrl[num] +')';
num++;
num%=arrUrl.length;
}, 1000);
};
aBtn[1].onclick = function (){
clearInterval( timer );
};
4.setTimeout( function(){ 2秒出现广告
miaov.style.display = 'inline-block';
setTimeout(function(){ 3秒广告消失
miaov.style.display = 'none';
}, 3000);
}, 2000);
5.var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn1.onclick = function () {
doMove ( oDiv, 'left', 12, 900, function () { 先往右再往下
doMove ( oDiv, 'top', 34, 500 );
});
};
function doMove ( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; //往前往后
clearInterval( obj.timer );
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir; // 步长
if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
}
obj.style[attr] = speed + 'px';
if ( speed == target ) {
clearInterval( obj.timer );
endFn && endFn();
}
}, 30);
}
function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
第10课：日期对象、时钟倒计时
1.window.onload = function () {
var oBody = document.body;
setInterval( fnTime, 1000 ); 每隔一秒刷新一次
fnTime ();
function fnTime () {
var myTime = new Date(); typeof 是object
var iYear = myTime.getFullYear(); number
var iMonth = myTime.getMonth()+1; 一月是0
var iDate = myTime.getDate();
var iWeek = myTime.getDay();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();
var str = '';
if( iWeek === 0 ) iWeek = '星期日';
if( iWeek === 1 ) iWeek = '星期一';
if( iWeek === 2 ) iWeek = '星期二';
if( iWeek === 3 ) iWeek = '星期三';
if( iWeek === 4 ) iWeek = '星期四';
if( iWeek === 5 ) iWeek = '星期五';
if( iWeek === 6 ) iWeek = '星期六';
str = iYear+ '年' +iMonth+'月'+iDate+'日 '+iWeek+' '+ toTwo(iHours)+' : '+ toTwo(iMin)+' : '+ toTwo(iSec);
oBody.innerHTML = str;
}
};
function toTwo ( n ) {
return n < 10 ? '0' + n : '' + n; 出现00 01，
}
2.window.onload = function () {
var aInp = document.getElementsByTagName('input');
var iNow = null;
var iNew = null;
var t = 0;
var str = '';
var timer = null;
aInp[2].onclick = function () {
iNew = new Date(aInp[0].value);
clearInterval( timer );
timer = setInterval (function (){
iNow = new Date();
t = Math.floor( ( iNew - iNow ) / 1000 );
if ( t >= 0 ) {
str =Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+ '时' +Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
aInp[1].value = str;
} else {
clearInterval( timer );
}
}, 1000);
};
};
距离：<input class="t1" type="text" value="November 27,2013 22:3:0" /><br />
还剩：<input class="t1" type="text" />
<input type="button" value="开始倒计时吧" />
3. var t = Math.floor( new Date().getTime()/1000 ); 时间戳，
alert( Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒' );
第11课：字符串、查找高亮显示
1.charCodeAt()
var str = '妙味课堂';
// alert( str.length );
// alert( str.charAt() );
// alert( str.charCodeAt() ); // 22937 妙
// alert( str.charCodeAt(1) ); // 21619 味
alert( str.charCodeAt() ); // 0~9 48~57 a~z 97~122 A~Z 65~90
// alert( String.fromCharCode(22937, 21619) ); //妙味
2.简单加密
先转为code，然后减1000，最后转换为字符，
str1 += String.fromCharCode(str.charCodeAt(i)-520);
3.一直查找indexOf(）
var str = 'www.miaov.com/2013ww';
// alert( str.indexOf('m') ); //4
// alert( str.indexOf('m', 5) );//从第5位开始找，12
// alert( str.indexOf('X') ); // -1 表示没找到
var str = '妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！';
var s = '妙味';
var i = 0;
while( str.indexOf( s, i ) != -1 ){ //找到这段话里秒味出现的所有位置
alert( str.indexOf( s, i ) ); //从左往右，i<0时 默认为0，从从头往后找
i = str.indexOf( s, i ) + s.length;
}
alert( str.lastIndexOf('妙味', 38) ); // 返回19，从右往左，i<0时 默认为0，从后往前找
4.substring()和slice( )截取字符串
var str = '妙味课堂是一支独具特色的IT培训团队';
// alert( str.substring(0,2) ); //截取秒味
// alert( str.substring(2,0) ); //截取秒味 可以检测两个数，大的往后扔，小的往前扔
// alert( str.substring(-3, 2) ); // -3 当成0处理
// alert( str.substring(2, -3) ); 可以检测两个数，大的往后扔，小的往前扔
// alert( str.slice( 2, 0 ) ); // 不交换位置 找不到东西
alert( str.slice( -4, -2 ) ); //截取培训 负数从后面倒着往前数~
第12课：数组随机、数组去重
