飞比寻常 (JOE) 生，简单，活，简单，生活，不简单！
JOE个人网站
JOE个人网站，不仅仅是一个网站，更像是一个展现自我的平台，致力于让朋友们都可以
有所感触，有所收获。
一、介绍
JavaScript - 客户端脚本语言 （不在服务器中运行，而是在客户端的浏览器中运行）
脚本语言不需要编译，基本上是按照顺序执行代码；
JS使得页面富有动态效果；
JS语言是弱类型语言
客户端脚本语言的产品
Javascript
ActionScript(微软)
scriptEase
Applet(JAVA)
------------他们都遵守一个标准（ECMAScript）
二、使用
JS语言的代码可以嵌入到HTML中（怎么嵌入？）
1、直接嵌入
<script></script>
a、head头中；
b、body体中；
注意：程序的执行顺序是自上而下执行，所以在编写JS代码的时候，这个执行顺序一定要小心；
弹窗效果：alert("Hello World!!!");
2、引入外部文件
在头部中写
<script src="./a.js"></script>
补充：除了正常的执行JS代码外，还有2种特殊的JS执行方式：
a、在超链接中执行JS代码程序:
<a href="javascript:alert(1);alert(2)">点我</a>
b、在普通标签中加入事件执行JS程序
<button onclick="alert(1)">点我</button>
<p onclick="alert(2)">这是一个普通的P标签</p>
三、语法
1、区分大小写的！！！ 变量、函数、运算符都区分大小写；
2、弱类型语言 （在声明变量的时候不需要指定数据类型）；
3、语句的结束可以用 ; 也可以用回车（但是强烈要求用 ; ）；
4、JS的注释：
单行注释用 //
多行注释用 /* */
5、JS的变量声明
用var声明变量；
变量的命名规则是：可以用数字、字母、下划线、$，但是不能以数字开头；
JS中变量不能是保留字（关键字）；
在命名变量的时候可以加一个自己设定的前缀，如（var z_n）；
6、JS的数据类型
typeof 帮助检查变量的数据类型；
a、number:包括整型和浮点型；
var n=10;
var m=10.1;
alert(typeof n);alert(typeof m);
b、string:被单引号或者双引号包围的都是string类型；
var x='10';
alert(typeof x);
注意：JS中的字符串连接符是 + ;
c、boolean:布尔数据类型 （true | false）
var y=true;
alert(typeof y);
d、object：对象数据类型
var n=new Array();
alert(typeof n);
e、null:null数据类型
var n=null;
alert(typeof null); //null虽然单独成立一个类型，但是本身却是object类型， 这是早期残留下来的；
f、undefined:未被定义的数据类型
var n;
alert(typeof n);
7、数据类型转换
a、可以用 Number String Boolean方法强制转换
var n='10';
alert(Number(n)); //输出 10
alert(typeof Number(n)); //String->Number
var n='10a';
alert(Number(n)); //输出NaN (Not a Number)
alert(typeof Number(n)); //输出Number
b、parseInt - 将字符串转为整数
var n='10a';
alert(parseInt(n)); //输出 10
c、parseFloat - 将字符串转为符点型
var n='10.1a';
alert(parseFloat(n)); //输出 10.1
补充：
var n=new Object;
//var n=new Array();
var flag=Boolean(n); 空数组和空对象使用Boolean转化的时候会转为真！
if(flag){
alert('真');
} else {
alert('假');
}
8、JS的运算符
+ 和 PHP 一样；
在JS中，如果加号两边是数字，则正常将数字相加；如果加号两边有一边是字符串，则加号变成字符串连接符，将两边连接起来；
var n=1+2+3;
alert(n); //6(Number)
var n=1+2+'3';
alert(n); //33(String)
var n=1+'2'+3;
alert(n); //123(String)
一元运算符
delete 删除对象中的属性；
var obj=new Object;
obj.name='你好';
delete obj.name;
alert(obj.name); //undefined
void 无返回值
<a href="javascript:void(0)">跳转</a>
四、语言结构
1、分支结构
在JS中，【else if】之间必须有空格
2、循环结构
for(var i=0;i<3;i++){
alert(i);
}
注意：在JS中没有foreach,和其等效的是 for in 循环；
遍历数组:
a、
var arr=new Array(10,11,12);
for(n in arr) {
document.write(n+'-->'+arr[n]+'<br/>'); //n是数组的键
}
b、var arr=[10,11,12];
for(var i=0;i<arr.length;i++) {
document.write(i+'-->'+arr[i]+'<br/>');
}
遍历对象：
和遍历数组一样；
如：
var obj=new Object;
obj.a='abc';
obj.b='def';
for(var n in obj) {
alert(obj[n]);
}
五、函数
function test(){
alert('我来自test');
}
test();
1、JS中，自定义函数不能带默认值：
function test(n=12){
alert(n);
}
test(); //这是错误的
注释：在最新版的火狐浏览器中，是支持默认值的；
2、给默认值的方法：
function test(n) {
if(typeof(n)=='undefined') {
n=12;
}
alert(n);
}
test(); //输出12
3、以下书写是正确的
function test(n,m,k){
alert(n);
}
test(10);
3、可变长度参数列表 (arguments封装了函数中实参部分的所有内容，可以用for in 方式遍历出来)
function test() {
for(n in arguments) {
document.write(arguments[n]+'<br/>');
}
}
test('a','b','c','d');
补充：
调试的时候，经常使用的方法：
alert 弹框输出；
document.write 输出到文档中；
4、获取arguments的长度 (arguments.length)
for(var i=0;i<arguments.length;i++){
document.write(arguments[i]);
}
5、函数的嵌套定义
function myfun(){
function mysum(x,y){
alert(222);
return x+y;
}
alert(111);
return mysum(1,2);
}
a、嵌套的子函数，只能出现在函数中，不能出现在ifelse这样的分支结构以及while这样的循环结构中；
b、嵌套的子函数，只能在函数中调用，不能在外层调用；
补充：不是重点，了解即可：
var f=new Function('x','y','var z=x+y;return z;');
alert(f(1,5)); //6
6、变量函数
function test(){
alert(123);
}
//alert(test);
var temp=test;
alert(temp); //输出的效果和test一样
temp(); //所以我们可以在这里加括号调用
7、匿名函数
var temp=function() {
alert(123);
}
//alert(temp);
temp();
8、回调函数
function test(x,func) {
alert(x+func(10));
}
function demo(n) {
return n*2;
}
test(1,demo); //21
-----------------------
function test(x,func) {
alert(func(x));
}
function demo(n) {
return n*2;
}
test(1,demo); //2
-----------------------
function test(x,func) {
alert(func(x));
}
function er(n) {
return n*2;
}
function san(n) {
return n*3
}
test(1,san); //3
----------------------
function test(x,func) {
alert(func(x));
}
test(1,function(n) {
return n*3;
}); //3
六、变量的作用域
核心：JS中全局的变量可以在局部中使用，但局部变量不可以在全局中使用
全局变量
1、在函数体外部通过var声明的变量是全局变量
2、在函数体内部不通过var声明的变量也是全局变量
3、在函数体外部没有通过var声明的变量也是全局变量
局部变量
1、在函数体内部通过var声明的变量是局部变量
2、形参属于局部变量
注意：如果在函数体里面声明了和全局变量同名的局部变量，则该函数体内部的同名的全局变量相当于不存在（undefined）
实例：
1、
var n=5;
function test() {
var n=10;
alert(n);
}
test(); //10
alert(n); //5
2、
var n=5;
function test() {
n=10;
alert(n);
}
test(); //10
3、
var n=10;
function test() {
alert(n);
var n=5;
}
test(); //undefined
alert(n); //10
4、
var n=10;
function test() {
var n=5;
function demo() {
return n;
}
}
alert(test()); //5
5、
var n=10;
function test() {
var n=5;
function demo() {
return n;
}
return demo;
}
alert(test()()); //5
七、声明数组的两种方式
注意：JS中没有关联数组，只有索引数组；
1、通过new 声明
-----------------------------------
var arr=new Array(); //声明好一个空数组
arr[0]='a'; //向一个数组赋值的时候必须指定下标
document.write(arr[0]);
------------------------------------
var arr=new Array(5); //声明一个长度为5的数组，但数组中并没有具体的值
document.write(arr.length);
------------------------------------
var arr=new Array(5,2,'a'); //声明一个数组，数组里面的值是5，2，a
document.write(arr[0]); //5
document.write(arr[1]); //2
document.write(arr[2]); //a
------------------------------------
var arr=new Array();
arr[5]=4;
document.write(arr); //,,,,,4
2、直接赋值法
var arr=[5,2,'a'];
document.write(arr[0]); //5
document.write(arr[1]); //2
document.write(arr[2]); //a
注意：模拟关联数组
利用数组是对象的机制模拟出关联数组的特性
var arr=new Array();
arr['key1']='a';
arr['key2']='b';
document.write(arr['key1']); //a
document.write(arr['key2']); //b
document.write(arr.key1); //a
document.write(arr.key2); //b
---------------------------------------
和以下效果相同
---------------------------------------
var arr=new Array();
arr.key1='a';
arr.key2='b';
document.write(arr.key1); //a
document.write(arr.key2); //b
document.write(arr['key1']); //a
document.write(arr['key2']); //b
八、数组
1、打印数组使用普通的 document.write(arr);
var arr=new Array();
arr['key1']=nw Array(1,2);
arr[0]='a';
document.write(arr); //直接打印关联的二维数组是不行的，只打印出来 a ；
2、可以用遍历方式来打印；
var arr=new Array();
arr['key1']=new Array(1,2);
arr[0]='a';
for(n in arr) {
document.write(arr[n]); //打印出的数组是带逗号的 a1,2
}
3、索引的二维数组可以直接打印；
var arr=new Array();
arr[1]=new Array(1,2);
arr[0]=3;
document.write(arr); //输出 3,1,2
4、数组一旦创立不能被删除，但是可以删除数组中具体的值使用的方式是delete
var arr=new Array('a','b','c');
delete arr[0];
document.write(arr); //,b,c
document.write(arr.length); //还是3
5、数组方法；
见手册
九、对象的声明（有3种方法）
1、通过new
<script>
var obj=new Object();
obj.name='joe';
obj.say=function(){
document.write(this.name);
};
obj.say();
</script>
2、快速声明法（推荐）
var obj={'name':'joe','age':18,'say':function(){alert(this.age)}};
obj.say();
3、（了解）通过function 声明
<script>
function People() {
this.name='joe';
this.age=18;
this.say=function(){
alert(this.age);
}
}
var obj=new People();
obj.say();
</script>
十、内置对象
1、时间对象 Date
<script type="text/javascript" charset="utf-8">
// var odate=new Date(); 如果什么参数都没有，表示当前时间；new Date(月 日 年 小时:分:秒)
var odate=new Date();
document.write('年:'+odate.getFullYear()+'<br/>');//返回当前年份（4位数字），客户端的时间；
document.write('月:'+odate.getMonth()+'<br/>');//返回月份，但是该月份是当前月份减1（0-11）
document.write('日:'+odate.getDate()+'<br/>');//返回日期
document.write('星期:'+odate.getDay()+'<br/>');//返回星期（0-6）
document.write('小时:'+odate.getHours()+'<br/>');//返回小时数
document.write('分钟:'+odate.getMinutes()+'<br/>');//返回分钟
document.write('秒:'+odate.getSeconds()+'<br/>');//返回秒
document.write('毫秒:'+odate.getMilliseconds()+'<br/>');//返回毫秒
</script>
2、布尔对象
var ob=new Boolean();
参数为：0、0.0、空字符串、false、undefined、NaN都会转化为false；
空数组和空对象为true；
3、数学对象 Math
Math.PI //获取圆周率
Math.abs()//取绝对值
var inew=Math.abs(-5);//取绝对值
Math.ceil() //进一取整
document.write(Math.ceil(1.001));//2
Math.floor()//向下取整
document.write(Math.floor(1.9));//1
Math.max(num1,num2,...numn);//取最大值
Math.max(1,9,8,6,100,102,98)
Math.min(num1,num2,...numn);//取最小值
Math.min(1,9,8,6,-100,102,98)
Math.round();//四舍五入
Math.round(2.5)//3
Math.random();//返回一个0-1之间的随机数
4、字符串对象
indexOf
lastIndexOf
match
var str='ab11111ba';
document.write(str.match(/\d{3}/)); //正则表达式也是对象，这里不用引号包围，直接使用 /正则表达式内容/
replace
var str="ab2ba3def4ab";
document.write(str.replace(/\d/g,'-')); //正则表达式后面加上g表示匹配所有符合条件的内容 ab-ba-def-ab
split
var str="a-b-c";
document.write(str.split('-')); //通过split分隔字符串为数组
slice
substr
var str="a-b-c";
document.write(str.substr(1,3)); //-b-
toLowerCase()
toUpperCase()
var str="a-b-c";
document.write(str.toUpperCase()); //A-B-C
十一、
BOM -- Browser Object Model (浏览器对象模型)
DOM -- Document Object Model (文档对象模型)
JS中所有的方法和对象都是基于window对象的，所以window可以在编码中省略不写；
如：
alert() 等效为 window.alert();
alert(); 弹出一个窗体，在窗体中有确定按钮；
confirm(); 弹出一个可以取消的窗体，如果选择确定返回真，取消返回假；
如：
if(confirm('AAAA')){
document.write('B');
} else {
document.write('C');
}
prompt('请输入性别',['默认值']);弹出一个可以输入内容的窗体，输入的内容可以返回到程序中处理；
如：
var str=prompt('请输入您的性别:','男');
if(str=='男') {
document.write('男人是泥巴做的');
} else if(str=='女') {
document.write('女人是水做的');
} else {
document.write('人妖是水泥做的');
}
setTimeout 间隔一段时间后执行程序，程序只执行一次
clearTimeout 清除
如：
<script>
var s=setTimeout(function(){
alert('AAAAAA');
},3000);
</script>
<button onclick="clearTimeout(s)">清除</button>
setInterval 间隔一段时间后执行程序，程序重复执行
/////////////////////// CLOCK /////////////////
<script>
var oy=document.getElementById('y');
var om=document.getElementById('m');
var od=document.getElementById('d');
var oh=document.getElementById('h');
var oi=document.getElementById('i');
var os=document.getElementById('s');
setInterval(function() {
var odate=new Date();
//var iy=parseInt(oy.innerHTML);
//var im=parseInt(om.innerHTML);
//var id=parseInt(od.innerHTML);
//var ih=parseInt(oh.innerHTML);
//var ii=parseInt(oi.innerHTML);
//var is=parseInt(os.innerHTML);
oy.innerHTML=odate.getFullYear()+'年 ';
om.innerHTML=odate.getMonth()+1+'月 ';
od.innerHTML=odate.getDate()+'日 ';
oh.innerHTML=odate.getHours()+':';
oi.innerHTML=odate.getMinutes()+':';
os.innerHTML=odate.getSeconds();
},1000);
</script>
////////////// date /////////////////////////////
<script>
//var odate=new Date();//如果什么参数都没有 表示当前时间
var odate=new Date('12 15 2012 23:46:52');//可以通过传入字符串的形式指定时间 格式：月 日 年 时：分：秒
document.write('年:'+odate.getFullYear()+'<br/>');//返回当前年份（4位数的年份） 注：该时间是客户端的系统时间,不一定准
document.write('月:'+odate.getMonth()+'<br/>');//返回月份 但是该月份是当前月份减1（0-11）
document.write('日:'+odate.getDate()+'<br/>');//返回日期
document.write('星期:'+odate.getDay()+'<br/>');//返回星期（0-6）
document.write('小时:'+odate.getHours()+'<br/>');//返回小时数
document.write('分钟:'+odate.getMinutes()+'<br/>');//返回分钟
document.write('秒:'+odate.getSeconds()+'<br/>');//返回秒
document.write('毫秒:'+odate.getMilliseconds()+'<br/>');//返回毫秒
</script>
//////////////////// setInterval应用--进度条的编写 ///////////////////////
<body>
<div id="wai" style="width:50px;height:650px;border:2px solid gray;">
<div id="nei" style="width:50px;height:0px;background:green;"></div>
</div>
<button onclick="pree()">下载</button>
<script type="text/javascript" charset="utf-8">
var owai=document.getElementById('wai');
var onei=document.getElementById('nei');
var iheight=parseInt(onei.style.height);
var iheight2=parseInt(owai.style.height);
function pree() {
var s=setInterval(function(){
iheight+=3;
if(iheight>=iheight2) {
clearInterval(s);
}
onei.style.height=iheight+'px';
},10);
}
</script>
</body>
/////////////////////////////////////////////////////
问题：
document.write();
当文档已经加载完成后，如果要向文档写入新的内容，处理的方式是，生成新的文档再写入，如：
<script>
document.write('AAAA');
document.write('BBBB');
</script>
<a href="javascript:document.write('abc')">点我</a>
<p onclick="document.write('def')">bbbb</p>
Navigator 对象：包含有关浏览器的信息
window.navigator.userAgent //返回浏览器的信息
通过这个方法可以判断客户端的浏览器各类
如：
<script>
var str=window.navigator.userAgent;
str=str.toLowerCase();
if(str.indexOf('msie')>0) {
alert('您用的是IE');
} else if(str.indexOf('firefox')>0) {
alert('您用的是火狐');
} else if(str.indexOf('chrome')>0) {
alert('您用的是chrome');
} else {
alert('其他');
}
</script>
History 对象
back 后退
forward 前进
go 指定history记录
如：
<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(-2)">后退2次</a>
如2：
<div id="did">3</div>
<script>
var odiv=document.getElementById('did');
var idiv=parseInt(odiv.innerHTML);
var s=setInterval(function(){
idiv--;
if(idiv==0) {
clearInterval(s);
window.history.back();
}
odiv.innerHTML=idiv;
},1000);
</script>
Location 对象
reload() 刷新
<a href="javascript:window.location.reload()">刷新</a>
跳转到某一个具体页面可以
window.location="http://www.baidu.com";
如：
setTimeout(function(){
window.location="./jindutiao.html";
},3000);
=============DOM==========================
DOM Document Object Model 文档对象模型
什么是文档对象模型：就是我们编写的HTML代码在页面中显示的部分；
核心思想：在某个事件源上触发某个事件，由这个事件调用处理程序，在程序中找对象，改属性！
事件源：在那里开始的动作（动作发源地）
事件:动作（干了什么）
处理程序：写的自定义函数
对象：动作最终要影响的目标
属性：对象的属性
在HTML中什么是对象？
一个完整的（成对或者单标签）标签就是对象
对象的属性就是标签的属性
对象的属性值就是标签的属性值
技巧：在head头中使用JS代码
window.onload只有在页面全部加载完成后才执行，利用这个机制可以将js代码全部写入到head头里面
window.onload=function(){
var op=window.document.getElementById('p1');
alert(op.id);
}
如何找对象
1、通过ID找对象
document.getElementById('id');
2、通过标签名找对象
document.getElementsByTagName('p');
注意：返回的是节点列表对象，我们应该用数组的方式使用该对象
如：
<script type="text/javascript" charset="utf-8">
window.onload=function() {
var odiv=document.getElementsByTagName('p');
//for(n in odiv){
// alert(odiv[n].innerHTML);
//}
for(var i=0;i<odiv.length;i++) {
alert(odiv[i].innerHTML);
//document.write(odiv[i].innerHTML);
}
}
</script>
</head>
<body>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</body>
补充：解决兼容性问题，可以加DTD头
innerText 获取标签中的文本
在火狐中，该方法使用 textContent获取
//////// 进度条 ////////////////////////////////////
<div id="wai" style="width:900px;background:gray;border:2px solid black;height:50px;">
<div id='nei' style="width:0px;background:red;height:50px;"></div>
</div>
<button onclick="process()">下载</button>
<script>
var owai=document.getElementById('wai'); //获取外部div的对象
var onei=document.getElementById('nei'); //获取内部div的对象
var iwidth=parseInt(onei.style.width);//获取内部div的宽度
var iwidth2=parseInt(owai.style.width);//获取内部div的宽度
//alert(iwidth);
//利用定时处理程序，设置为每10毫秒执行
function process() {
var s=setInterval(function(){
iwidth+=3; //内部div的宽度自加3
if(iwidth>=iwidth2){ //当内部div宽度大于等于外部div宽度，则程序停止
clearInterval(s); //停止Interval程序
alert('您的下载完成');
}
onei.style.width=iwidth+'px'; //将新的内部的div宽度写入到对象中
},10);
}
</script>
//////////////////////////////////////////////////////
1、键盘事件
onkeypress 的ASCII码是小写值
onkeydown 的ASCII码是大写值
-----------------实现div按wasd上左下右的移到--------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Demo</title>
<script>
window.onload=function() {
//获取div对象，设置为全局对象
odiv=document.getElementById('box');
//获取初始的top
itop=parseInt(odiv.style.top);
//获取初始的left
ileft=parseInt(odiv.style.left);
}
//div移动函数
function move(event) {
//获取键盘事件的ASICII码
var c=event.charCode || event.keyCode;
//判断ASIC码，更改div的定位坐标，实现移动效果 上w 119 下s 115 左a 97 右d 100
switch(c) {
//上
case 119:
itop-=10;
odiv.style.top=itop+'px';
break;
//下
case 115:
itop+=10;
odiv.style.top=itop+'px';
break;
//左
case 97:
ileft-=10;
odiv.style.left=ileft+'px';
break;
//右
case 100:
ileft+=10;
odiv.style.left=ileft+'px';
break;
}
}
</script>
</head>
<!-- 键盘事件可以写在body中 -->
<body onkeypress='move(event)'>
<div id="box" style="width:50px;height:50px;border:1px solid black;position:absolute;top:0;left:0"></div>
</body>
</html>
-----------JS不写在body里的方法----------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Demo</title>
<script>
window.onload=function() {
//获取div对象，设置为全局对象
odiv=document.getElementById('box');
//获取初始的top
itop=parseInt(odiv.style.top);
//获取初始的left
ileft=parseInt(odiv.style.left);
//获取body对象
document.body.onkeypress=function(event) {
//获取键盘事件的ASICII码
var c=event.charCode || event.keyCode;
//alert(c);
//判断ASIC码，更改div的定位坐标，实现移动效果 上w 119 下s 115 左a 97 右d 100
switch(c) {
//上
case 119:
itop-=10;
odiv.style.top=itop+'px';
break;
//下
case 115:
itop+=10;
odiv.style.top=itop+'px';
break;
//左
case 97:
ileft-=10;
odiv.style.left=ileft+'px';
break;
//右
case 100:
ileft+=10;
odiv.style.left=ileft+'px';
break;
}
}
}
</script>
</head>
<!-- 键盘事件可以写在body中 -->
<body>
<div id="box" style="width:50px;height:50px;border:1px solid black;position:absolute;top:0;left:0"></div>
</body>
</html>
--------------------------------------------------
1、鼠标事件
--------------onmousemove 中如何获取鼠标的坐标------------
<script>
//documentElement 代表整个文档区域，而不仅限于body部分
document.documentElement.onmousemove=function(event) {
var x=event.clientX;//获取x轴坐标
var y=event.clientY;//获取y轴坐标
var ox=document.getElementById('x');
var oy=document.getElementById('y');
ox.innerHTML=x;
oy.innerHTML=y;
}
</script>
</head>
<!-- 键盘事件可以写在body中 -->
<body>
x:<b id="x"></b>
y:<b id='y'></b>
</body>
---------------------------------------------------------
<script>
window.onload=function() {
var oimg=document.getElementById('imgid');
//documentElement 代表整个文档区域，而不仅限于body部分
document.documentElement.onmousemove=function(event) {
var x=event.clientX;//获取x轴坐标
var y=event.clientY;//获取y轴坐标
oimg.style.left=x+'px';
oimg.style.top=y+'px';
}
}
</script>
</head>
<!-- 键盘事件可以写在body中 -->
<body>
<img src="./a.jpg" id='imgid' style="position:absolute;top:0;left:0"/>
</body>
----------------------------------------------------------
<script>
window.onload=function( ){
//获取图片对象
var oimg=document.getElementById('imgid');
//准备2个空数组，一个放x轴坐标，一个放y轴坐标
var x_arr=new Array();
var y_arr=new Array();
document.documentElement.onmousemove=function(event) {
//将坐标轴压入数组
x_arr.push(event.clientX);
y_arr.push(event.clientY);
//2秒后释放数组，改变对象的left和top值
var s=setInterval(function() {
var x=x_arr.shift();
var y=y_arr.shift();
oimg.style.left=x+'px';
oimg.style.top=y+'px';
clearInterval(s);
},2000);
}
}
</script>
</head>
<body>
<img src="./a.jpg" id='imgid' style="position:absolute;top:0;left:0" width="50" height='28'/>
</body>
----------------------点住移动图片的实现方法1/3-----------------------
<script>
window.onload=function() {
var press='no'; //代表鼠标没有按下
//1.获取图片对象
var odiv=document.getElementById('did');
//2.图片移动触发程序
odiv.onmousedown=function(event) {
press='yes';//代表鼠标按下
w=parseInt(odiv.style.left); //获取当前图片x偏移
h=parseInt(odiv.style.top); //获取当前图片y偏移
event = window.event || event;//解决event的兼容性问题
x1=event.clientX-w; //获取点击时的x位置-w
y1=event.clientY-h; //获取点击时的y位置-h
//3.获取鼠标在整个区域中的坐标点
document.documentElement.onmousemove=function(event) {
event = window.event || event;//解决event的兼容性问题
var x=event.clientX-x1; //获取移动时鼠标的x轴-x1，即图片应该在的x
var y=event.clientY-y1; //获取移动时鼠标的y轴-y1，即图片应该在的y
if(press=='yes') {
odiv.style.left=x+'px';
odiv.style.top=y+'px';
}
}
}
odiv.onmouseup=function() {
press='no';//不按了
}
}
</script>
</head>
<body>
<div id='did' style="background:url(./b.jpg);position:absolute;top:0;left:0;width:428px;height:506px"></div>
</body>
----------------------点住移动图片的实现方法2/3-----------------------
<script>
window.onload=function() {
var press='no'; //代表鼠标没有按下
//1.获取图片对象
var odiv=document.getElementById('did');
//2.图片移动触发程序
odiv.onmousedown=function(event) {
press='yes';//代表鼠标按下
var clickx=event.clientX; //获取点击时的X坐标
var clicky=event.clientY;//Y坐标
pointx=parseInt(odiv.style.left); //照片坐标X
pointy=parseInt(odiv.style.top); //Y
//3.获取鼠标在整个区域中的坐标点
document.documentElement.onmousemove=function(event) {
var x=event.clientX; //获取鼠标的x轴
var y=event.clientY; //获取鼠标的y轴
var mvx=x-clickx; //移动的坐标X
var mvy=y-clicky; //移动的坐标X
if(press=='yes') {
odiv.style.left=(pointx+mvx)+'px'; //现坐标=照片坐标+移动距离
odiv.style.top=(pointy+mvy)+'px';
}
}
}
odiv.onmouseup=function() {
press='no';//不按了
}
}
</script>
</head>
<body>
<div id='did' style="background:url(./b.jpg);position:absolute;top:0;left:0;width:428px;height:506px"></div>
</body>
----------------------点住移动图片的实现方法3/3-----------------------
<script type="text/javascript" charset="utf-8">
window.onload=function() {
// press='no';
odiv=document.getElementById('did');
odiv.onmousedown=function(event) {
press='yes';
x=parseInt(odiv.style.left);
y=parseInt(odiv.style.top);
event = window.event || event;
ox=event.clientX;
oy=event.clientY;
document.documentElement.onmousemove=function(event) {
event = window.event || event;
var mx=event.clientX;
var my=event.clientY;
var xx=mx-ox+x;
var yy=my-oy+y;
if(press=='yes') {
odiv.style.top=yy+'px';
odiv.style.left=xx+'px';
}
}
}
odiv.onmouseup=function() {
press='no';
}
}
</script>
</head>
<body>
<div id="did" style="background:url(./b.jpg);position:absolute;top:0px;left:0px;width:428px;height:506px;"></div>
</body>
--------------------------------------------------------------
3、阻止冒泡
在嵌套的对象中设置event，调用event中的cancelBubble来阻止冒泡
event.cancelBubble=true; //阻止冒泡
-----------------------------------------------------
<script type="text/javascript" charset="utf-8">
function test1() {
alert('我来自大div');
}
function test2() {
event.cancelBubble=true; //阻止冒泡
alert('我来自小div');
}
</script>
</head>
<body>
<div onclick='test1()' style="width:300px;height:300px;background:green;">
<div onclick='test2()' style="width:100px;height:100px;background:red"></div>
</div>
</body>
-------------------------------------------------------
4、JS 在分帧中的使用
注意：将代码放在服务器端测试，不然会出现一些未知错误；
------------------方法1---------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Top</title>
<script type="text/javascript" charset="utf-8">
window.onload=function() {
objs=window.top.frames; //这里的window代表top.html,这里的top指框架的顶层，而不是窗口top，即进入上层框架的意思
}
function change() {
//document.body.style.background='red';
//document.bgColor='red';
//通过frames获取全局窗口对象
//objs[0].document.bgColor='red'; //objs[0]相当于window
objs[1].document.bgColor='green';
objs[2].document.bgColor='red';
/*
还可以直接指向具体的某一个窗体
var obj=window.top.right;
obj.document.bgColor='green';
*/
}
function wu() {
objs[1].document.bgColor='white';
objs[2].document.bgColor='white';
}
</script>
</head>
<body>
top
<button onclick='change()'>点我</button>
<button onclick='wu()'>去色</button>
</body>
</html>
------------方法2--------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Top</title>
<script>
window.onload=function() {
oleft=window.top.left;
oright=window.top.right;
}
function user() {
oleft.location='./user/left.html';
oright.location='./user/right.html';
}
function wenzhang() {
oleft.location='./wenzhang/left.html';
oright.location='./wenzhang/right.html';
}
</script>
</head>
<body>
<h1>后台管理系统</h1>
<div>
<a href='javascript:user()'>用户管理</a>
<a href='javascript:wenzhang()'>文章管理</a>
</div>
</body>
</html>
==============================================================
在form表单中 onsubmit 只要返回假就可以阻止表单的提交
在form表单中 onreset 只要返回假就可以阻止表单的重置
----------------------------------
<form action="./a.php" method="post" onsubmit='return false'>
<input type="text" name="username" />
<input type="submit" name="submit" />
</form>
--------------------------------------
<script type="text/javascript" charset="utf-8">
function check() {
var oinput=document.getElementById('test');
if(oinput.value) {
return true;
} else {
return false;
}
}
</script>
</head>
<body>
<form action="./a.php" method="post" onsubmit='return check()'>
姓名：<input id="test" type="text" name="username" />
<input type="submit" name="submit" value="提交" />
</form>
</body>
----------------------------------------
getElementsByName 根据表单中的Name获取对象
--------------------------------------------
<script type="text/javascript" charset="utf-8">
function check() {
var oinput=document.getElementsByName('like[]');
for(var i=0;i<oinput.length;i++) {
if(oinput[i].checked==true) {
alert(oinput[i].value);
}
}
}
</script>
<form action="./a.php" method="post" onsubmit='return check()'>
爱好：i
<input type="checkbox" name="like[]" value="girl" />女孩
<input type="checkbox" name="like[]" value="boy" />男孩
<input type="checkbox" name="like[]" value="unkonw" />未知
<input type="submit" name="submit" value="提交" />
</form>
--------------------------------------------
全选、全不选、反选
--------------------------------------------
<script type="text/javascript" charset="utf-8">
window.onload=function() {
oinput=document.getElementsByName('like[]');
}
function check() {
for(var i=0;i<oinput.length;i++) {
if(oinput[i].checked==true) {
alert(oinput[i].value);
}
}
}
function selectAll() {
for(var i=0;i<oinput.length;i++) {
oinput[i].checked=true;
}
}
function clearAll() {
for(var i=0;i<oinput.length;i++) {
oinput[i].checked=false;
}
}
function reverse() {
for(var i=0;i<oinput.length;i++) {
if(oinput[i].checked==true) {
oinput[i].checked=false;
} else {
oinput[i].checked=true;
}
}
}
</script>
</head>
<body>
<form action="./a.php" method="post" onsubmit='return check()'>
爱好：
<input type="checkbox" name="like[]" value="girl" />女孩
<input type="checkbox" name="like[]" value="boy" />男孩
<input type="checkbox" name="like[]" value="unkonw" />未知
<input type="submit" name="submit" value="提交" />
</form>
<button onclick="selectAll()">全选</button>
<button onclick="clearAll()">全不选</button>
<button onclick="reverse()">反选</button>
</body>
--------------------全选、全不选2---------------------------------
<script type="text/javascript" charset="utf-8">
window.onload=function() {
oinput=document.getElementsByName('like[]');
}
function change(obj) {
for(var i=0;i<oinput.length-1;i++) {
oinput[i].checked=obj.checked;
}
}
</script>
</head>
<body>
<form action="./a.php" method="post" onsubmit='return check()'>
爱好：
<input type="checkbox" name="like[]" value="girl" />女孩
<input type="checkbox" name="like[]" value="boy" />男孩
<input type="checkbox" name="like[]" value="unkonw" />未知
<input type="submit" name="submit" value="提交" />
<br/>
设置：
<input type="checkbox" name="like[]" onclick='change(this)' />
</form>
</body>
-----------------------全选、全不选3-------------------------------
<script type="text/javascript" charset="utf-8">
window.onload=function() {
oinput=document.getElementsByName('like[]');
}
function change() {
for(var i=0;i<oinput.length;i++) {
oinput[i].checked=oinput[oinput.length-1].checked;
}
}
</script>
</head>
<body>
<form action="./a.php" method="post" onsubmit='return check()'>
爱好：
<input type="checkbox" name="like[]" value="girl" />女孩
<input type="checkbox" name="like[]" value="boy" />男孩
<input type="checkbox" name="like[]" value="unkonw" />未知
<input type="submit" name="submit" value="提交" />
<br/>
设置：
<input type="checkbox" name="like[]" onclick='change()' />
</form>
</body>
------------------------全选、全不选4------------------------------
<script type="text/javascript" charset="utf-8">
window.onload=function() {
oinput=document.getElementsByName('like[]');
}
function change() {
var xx=oinput[oinput.length-1].checked;
for(var i=0;i<oinput.length-1;i++) {
if(xx==true) {
oinput[i].checked=true;
} else {
oinput[i].checked=false;
}
}
}
</script>
</head>
<body>
<form action="./a.php" method="post" onsubmit='return check()'>
爱好：
<input type="checkbox" name="like[]" value="girl" />女孩
<input type="checkbox" name="like[]" value="boy" />男孩
<input type="checkbox" name="like[]" value="unkonw" />未知
<input type="submit" name="submit" value="提交" />
<br/>
设置：
<input type="checkbox" name="like[]" onclick='change()' />
</form>
</body>
-----------------------onreset、用户名密码不能为空、onfocus、onblur--------
onfocus - 获取焦点事件
onblur - 失去焦点事件
--------------------------------------------------------
<script type="text/javascript" charset="utf-8">
window.onload=function(){
oinput=document.getElementsByName('like[]');
}
function change(){
var xx=oinput[oinput.length-1].checked;
for(var i=0;i<oinput.length-1;i++) {
if(xx==true){
oinput[i].checked=true;
}else{
oinput[i].checked=false;
}
}
}
function check() {
onames=document.getElementsByName('username');
opwds=document.getElementsByName('password');
// var olikes=document.getElementByName('like[]');
var flag1=true;
if(onames[0].value=='') {
document.getElementById('username').innerHTML="用户名不能为空";
flag1=false;
}
if(opwds[0].value=='') {
document.getElementById('password').innerHTML="密码不能为空";
flag1=false;
}
var flag2=false;
for(var i=0;i<oinput.length-1;i++) {
if(oinput[i].checked==true) {
flag2=true;
break;
}
}
if(flag1==true && flag2==true) {
return true;
} else {
return false;
}
}
function cl() {
document.getElementById('username').innerHTML='';
document.getElementById('password').innerHTML='';
}
function look() {
if(opwds[0].value=='') {
document.getElementById('password').innerHTML='密码不能为空';
}
if(onames[0].value=='') {
document.getElementById('username').innerHTML='用户名不能为空';
}
}
</script>
</head>
<body>
<form action="./a.php" method="post" onsubmit='return check()' onreset='return confirm("确定要重置吗")'>
姓名：<input type="text" name="username" onfocus='cl()' onblur='look()' /><span style="color:red;" id="username"></span><br/>
密码：<input type="password" name="password" onfocus='cl()' onblur='look()' /><span style="color:red" id="password"></span><br/>
爱好：
<input type="checkbox" name="like[]" value="girl" />女孩
<input type="checkbox" name="like[]" value="boy" />男孩
<input type="checkbox" name="like[]" value="unkonw" />未知<br/>
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重置" /><br/>
设置：
<input type="checkbox" name="like[]" onclick='change()' />
</form>
</body>
------------------------------------------------
在JS中，中文和英文字母一样，一个字算一个长度
------------------------------------------------
<script type="text/javascript" charset="utf-8">
//JS中不分中英文，在计算字符串长度的时候