1.JavaScript的应用
- 使用表单元素(输入域、文本区、按钮、单选钮、复选框、选择列表)使Web页面直接响应用户
- 发布类似于数据库信息的小量数据集，并提供友好的数据界面
- 需要控制多框架导航、插件、或基于用户在HTML文档中选择的Java applet
- 提交给服务器之前，预处理客户端的数据
- 在现代的浏览器上动态和实现改变内容和风格以响应用户的交互
2.JavaScript脚本
- 每当在HTML文档中包含JavaScript时，必须使用附有标记对的命令行。
- type=”text/javascript”：表明脚本所用的语言，使得浏览器能够正确解析
JavaScript是对大小写敏感的，在使用JavaScript文字输入时要有正确的大小写
HTML标记语言(包括<script>标记)可以任意选择大小写，但是JavaScript的所有内容都是区分大小写的- 注意：XHTML样式需要标记和属性名都是小写
运行脚本的触发器
如:
//表示当页面及页面内容载入完毕时浏览器触发的事件 window.onload = 函数名; //注意:函数名后不带括号获得浏览器信息
要获得浏览器版本和名称信息来显示在当前页面中，调用JavaScript从名为navigator的特定对象中提取所需属性，此对象有几个属性揭示了运行脚本的Web浏览器的细节信息
3.浏览器对象和文档对象
面向Web应用程序任务时，可以用客户端的JavaScript解决以下问题
- 数据输入验证(如：用户名与密码)
- 无服务器的CGI
- 动态HTML交互性
- CGI原型
- 从繁忙的服务器上下载
- 给毫无生气的页面增加活力
- 创建”会思考的Web页面”
文档对象模型(DOM)
对HTML标记应用严格的结构化设计的结果是有明确元素层次的文档，这些元素相互嵌套
//一个空的HTML文档最少具有的元素 <html> <head></head> <body></body> </html>浏览器中的对象模型的基本结构
window:
navigator
screen
document
history
locationwindow对象：代表HTML文档在浏览器窗口的内容区域，所有的动作都是在窗口内发生的，窗口是对象层次中最外部的元素
navigator对象：此对象只读，主要是读取容纳当前文档的浏览器品牌以及版本,如：
navigator.userAgent;screen对象：只读对象，让脚本了解浏览器运行的物理环境,如：
screen.width;history对象：只是帮助脚本模拟单击后退或前进按钮的效果
- location对象：将不同的页面载入到当前窗口或框架的主要途径
- document对象：每个载入窗口中的HTML文档成为一个document对象。document对象包含脚本中的内容
对象引用
对象命名，命名规则：
- 不能有空格
- 除了下划线之外不应该包含标点符号
- 对id属性的赋值必须包含在引号内
- 不能以数字开头
- 相同的文档中，名字是唯一的
引用特定对象
- JavaScript是区分大小写的
- JavaScript用传统的句号圆点表示，圆点左侧的项表示document对象，圆点右侧的项表示getElementById()
允许将相同的标识符同时分配给同一个标签的id和name属性，如：
<input type="button" id="btn" name="btn" value="Click Me" />
节点术语
脚本最常接触的两类节点
- 元素节点(element nodes)
- 文本节点(text nodes)
如：
<html> <body> <!-- p标签有两个文本节点与一个元素节点(b标签) --> <p>This is a <b>example</b> for nodes</p> <body> </html>当元素包含多个子节点时，子节点的顺序完全取决于HTML源代码的顺序
- 文本节点永远不能包含另一个节点，子节点总是被一个元素节点所包含
- 每个被载入的HTML文档都包含一个文档节点
引用元素节点的语法是：
document.getElementById();如何定义对象
对象定义的三个方面：属性、方法以及事件(处理器)
属性：每个属性都有一个值与之相对应(值可以是空或零)
//指定4个属性(type、id、name、value) <input type="button" id="clicker" name="click" value="Click Me"/> //属性的引用是： //document.getElementById("属性值").属性名 document.getElementById("clicker").value;方法
- JavaScript语句必须包括一个方法引用
如果一个方法需要多个参数，则参数之间用逗号隔开，如：
window.moveTo(20,100);
事件
如：
<html> <body> <form> <input type="button" value="Btn" onclick="window.alert('Hello')";> </form> </body> </html>JavaScript对单引号和双引号不作区分，只要组成一对即可
4.脚本以及HTML文档
script标记
<script type="text/javascript"> //代码... </script>- type属性告诉浏览器要把标记中的代码用javascript语言来解析
标记的位置
一般来说是,脚本是放在标签中的，如：
<html> <head> <title>Document</title> <script type="text/javascript"> //... </script> </head> <body> </body> </html>也可以放置在body中，如：
<html> <head> <title>body脚本<title> </head> <body> <script type="text/javascript"> //... </script> </body> </html>在一个文档中的script标记数目不受限制，可以是在head标签和body标签中都有脚本标记，也可以是一个标签中有多个脚本标记。
对于浏览器中旧版本中会显示脚本代码的处理方法
通过在脚本代码中加入HTML注释解决，如：
<script type="text/javascript"> <!-- //在JScript代码中使用HTML注释可以解决低版本浏览器显示JScript代码的问题 //javascript代码 // --> //注意此处前面必须加上双斜线 </script>
javascript语句所能做的基本操作：
- 定义或初始化变量
- 给属性或变量赋值
- 改变属性或变量的值
- 调用对象的方法
- 调用函数程序
脚本执行的时间：
document加载时，如：
//在body中加入script语句 <html> <body> <script type="text/javascript"> alert("加载时执行..."); </script> </body> </html>document加载后
//在head标签中 <html> <head> <title>Test Load<title> <script type="text/javascript"> // //方式一 //window.onload=function(){ // alert("方式一：加载后执行..."); //} //方式二 function load(){ alert("方式二：加载后执行...") } window.onload=load; //注意右侧的只是函数名,不带括号;有括号的表示的是函数的返回值 </script> </head> <body> </body> </html>用户动作响应时
<html> <head> <title>TestLoding</title> <script type="text/javascript"> function Click(){ alert("Button按钮点击,用户动作响应时加载..."); } </script> </head> <body> <input type="button" onclick="Click()" value="Button"/> </body> </html>其他脚本语句调用时
- 在Javascript中，数据常见的形式是数字、文本(称做字符串)、对象(对象模型中的对象、脚本创建的对象)、以及true和false(称作Boolean)
5.程序设计
- JavaScript数值(数据)类型
- String：引号内一系列字符
- 如：”Hello”
- Number：不在引号内的任何数字
- 如：4.5
- Boolan：逻辑真或假
- 如：true
- Null：空值
- 如：null
- Object：通过属性和方法定义的软件对象(数组也是对象)
- Function：函数定义
- String：引号内一系列字符
- JavaScript属于弱类型语言，其中的变量使用var关键字来声明，如：var str，变量可以存放任何类型的值
- 变量名的命名要求：
- 不能使用任何保留的关键字、词
- 不能包含空格字符，有多个词时可以使用其他两种方式，如：last_name或lastName
- 除下划线之外不要用任何标点符号
- 首字母不能是数字
表达式的特殊问题：
若初始myAge等于45，yourAge是myAge-15，则在后面myAge改变时不会影响yourAge的值，即：
var myAge = 45; var yourAge = myAge - 15; //yourAge=30 //修改myAge的值 myAge = 30; //yourAge的值仍为30注意下面表达式的的值：
var str1 = "求值：" + 1 + 2； //str1=求值：12 var str2 = 1 + 2; //str2=3 var str3 = 1 + 2 + "是结果"; //str3=3是结果
数据转换
- 在JavaScript中整数和浮点数：
- 整数：没有小数点或小数点后没有数值
- 浮点数：小数点后面可以有数值
字符串—>数值
两个方法：parseInt()与parseFloat()，如：
//注意：传入的字符串必须是数值型的 parsetInt("32"); //结果为32 parseIndt("32.5"); //结果为32 parseFloat("33"); //结果为33 parseFloat("33.5"); //结果为33.5
数值—>字符串
通过加入空字符串的方式实现,如：
("" + 32); //结果为:"32" ("" + 36).length; //结果为:2
- 在JavaScript中整数和浮点数：
操作符
算数操作符(+、-、*、/、%(求余))
+：在字符串之间表示连接符,在数值之间表示加法- 作为字符串的连接符时,不区分字和空格
比较操作符：
- 返回类型：Boolean类型(true或者false)
操作符类型
==、!=、>、>=、<、<=
控制结构
- 基本结构：if、if…else、for结构
函数
- 函数能返回一个值给调用它的语句，但并不是必须的，当函数返回值时，调用语句把函数作为表达式处理，在函数调用出插入返回值
- 创建函数应尽量保证函数处理的内容越少越好
函数的参数不用var关键字来初始化，函数调用时他们自动进行相应的初始化，如：
<html> <head> <title>Function Test</title> <script type="text/javascript"> function Cilck(msg){ alert("You Click the Button " + msg); } </script> </head> <body> <form> <input type="button" value="Button" onClick="Click('Hello !')"/> </form> </body> </html>在JavaScript语言中，同一个JavaScript数组的不同行可以包含不同的数据类型
数组
创建
var strs = new Array(5); //5指定数组要使用的元素个数赋值
strs[0] = "djh"; strs[2] = "Tom"; ...存取数据
- 通过数组名和方括号中的下标获取或改变指定数组位置的数据
数组中的document对象
浏览器会为文档中相同的对象创建一个数组，如：用户的页面含有两个form表单，则可以使用数组引用表单
document.forms[0]; document.forms[1];
6.window与document对象
- window对象的子元素
- navigator
- screen
- document
- history
- location
访问窗口属性与方法
方式一：
window.propertyName window.methodName([prameters])方式二：(用于复杂的、涉及多框架和窗口的脚本中使用)
self.propertyName self.methodName([prameters])
创建窗口
open()方法，带有三个参数：URL、 HTML标记语言属性引用、窗口大小，如：
<html> <head> <title>Window</title> <script type="text/javascript"> <!-- var subWindow; function openWindow(){ subWindow = window.open("http://www.baidu.com", "def", "default"); // alert(sub); } //关闭窗口 function closeWindow(){ if(sub){ subWindow.close(); subWindow = null; } } // --> </script> </head> <body> <button onclick="openWindow()">打开子窗口</button> <button onclick="closeWindow()">关闭子窗口</button> </body> </html>
window对象的属性与方法
window.alert()方法
alert("调用了窗口的alert()方法...");window.confirm()方法：确认对话框,有返回值：单击OK返回true，单击Calcel返回false
<html> <head> <title>Window Method</title> <script type="text/javascript"> window.onload = function(){ window.confirm("这是一个信息框"); } </script> </head> <body> </body> </html>window.prompt()方法：提示对话框，有两个参数
- 第一个参数为提示信息
第二个参数为输入框的默认值，不传递或者传递传递空字串
//点击确认键,返回的为输入的数据,点击取消键返回null <html> <head> <title>Window Method</title> <script type="text/javascript"> window.onload = function(){ var user = window.prompt("请输入用户名", "") //if(user != "" && user != null){ if(user){ document.write("您的用户名为： " + user); } } </script> </head> <body> </body> </html>
- load事件
- 它确保所有document对象都存在于浏览器文档对象模型中
location对象
- 表示载入窗口的URL
- URL定义了一个文件的地址和数据传输方法，包括协议(如:http:)和主机名(如:www.baidu.com)
- href属性定义了完整的URL
设置location.href属性是脚本导航到其他页面的基本方法，如：
<html> <head> <title>Window Method</title> <script type="text/javascript"> window.onload = function(){ location.href = "http://www.baidu.com"; //表示当页面加载完成时转到相应URL的页面 } /**//设置子窗口的页面地址 var newWindow = window.open(); newWindow.location.href="http://sina.com"; */ </script> </head> <body> </body> </html>
- navigator对象
- navigator.userAgent属性返回浏览器名
- navigator.appVersion属性返回浏览器版本
document对象
document.forms[]属性：属性值是一个文档中所有form元素对象的数组
length属性查看多少个form对象，如：
var count = document.forms.length; //访问文档中的第一个表单,方式如下 document.forms[0]; //也可以通过表单的name属性值来引用，如： document.forms["formName"]; //按名称引用form对象的第二种方式是将名称附加为document对象的属性,如: document.forNamedocument.images[]属性：以\标记方式插入到文档的图像的集合(数组)
document.images属性的存在表名浏览器支持图像交换，如：
//可以防止不支持图像的浏览器显示错误信息 if(document.images){ //处理img对象的语句 }
document.write()方法
- 页面载入后，浏览器输出流自动关闭，该方法打开一个新的输出流，并清除当前页面的内容
写完内容后必须关闭输出流，调用document.close()，在最后一个write()方法后必须包含有document.close()方法，否则不能显示图像与表单，且中间的内容都是追加的形式，而不会覆盖，如：
document.write("Hello JS!" + "<br/>"); document.write("javascript是一门弱语言"); document.close();
documen.createElement()和document.createTextNode()方法
documen.createElement()：用户在浏览器的内存中创建一个全新的元素对象，字符串参数传递给方法，如将元素的标记名作为：
var newElem = document.createElement("p");document.createTextNode()方法生成一个全新的文本节点并用所需文本填充节点，如：
var newText = document.createTextNode("Hello, create new text node.");document.getElementById()方法，唯一的参数是一个用引号括起来的字符串，如：
var btn = document.getElementById("btn");- 该方法返回一个值，通常将该值保存在一个变量中以便随后的脚本语句使用
子节点的添加：appendChild()方法，如：
添加元素节点
//创建节点 var liNode = document.createElement("li"); //获取元素节点 var ulNode = document.getElementsByTagName("ul")[0]; //向获取的ulNode元素节点添加创建的liNode子节点 ulNode.appendChild(liNode);添加文本节点
//创建文本节点 var textNode = document.createTextNode("汕尾"); //获取元素节点 var addNode = document.getElementsByTagName("li")[4]; //向元素节点添加文本子节点 addNode.appendChild(textNode);
7.表单及表单元素
form对象
form表单层次结构
form---text---textarea、password ---radio---checkbox、hidden ---button---result、submit ---select---option访问表单属性
用户可以为name、target、action、method、enctype设置属性，如：
document.forms[0].action; //获取 document.forms[0].action = "http://www.baidu.com"; //设置属性form.elements[]属性
<html> <head> <title>Form Table</title> <script type="text/javascript"> <!-- function clickOn(){ var form = window.document.forms[0]; //获取第一个for表单 for(var i = 0; i < form.elements.length; i++){ alert(form.elements[i].type); //打印表单下的个元素的type名 if(form.elements[i].type == "text"){ form.elements[i].value = " "; //将type属性为text的值置为空字符串 } } alert(form.elements.length); } // --> </script> </head> <body> <form> <input type="text" id="user" value="djh" /><br/> <input type="text" id="course" value="Java" /><br/> <input type="text" id="class" value="3班" /><br/> <input type="button" value="登录" onclick="clickOn()" /> </form> </body> </html>
表单属性的方法引用，
格式：
documen.formName.controlName; //formName：form表单name值，controlName：表单元素的name属性值如：
<html> <head> <script type="text/javascript"> alert(document.test.user.value); //通过name属性来引用 alert(document.test.pwd.value); </script> </head> <body> <form name="test" action="cgi-bin/search.pl"> <input type="text" name="user" value="language"/> <input type="password" name="pwd" value="java" /> </form> </body> </html>
文本输入改变事件，如：
<html> <head> <title>onChange</title> <script type="text/javascript"> <!-- function upperMe(){ //1.获取元素控件 var field = document.forms[0].convert; //2.获取元素的value值 var val = field.value; //3.将得到的value值转换为大写 field.value = val.toUpperCase(); } </script> </head> <body> <!--onsubmt该处表示设置为不提交表单，不加上这一事件处理器，按下Enter键将重新加载页面--> <form onsubmit="return false"> <!--onChange事件表示文本改变时调用--> <input type="text" name="convert" value="sample" onchange="upperMe()" /> </form> </body> </html>- 复选框对象
- 复选框的关键属性是checked，属性取值有两种ture或者false，是一个Boolean值
- 复选框一般不会作为触发器，而是作为选择设置器
单选按钮对象
- 同一组的按钮，属性name的值必须是相同的
读取组中的按钮数方式：
//通过访问相应表单的按钮组名下的length属性 document.forms[0].groupName.length;查询按钮是否被选中的方式：
//必须一个一个按钮的查询 document.forms[0].groupName[0].checked; //查看属性是否为true
select对象
- 一个包含option对象数组的对象
- 用来在弹出列表或者滚动列表中显示对象
select对象的重要属性为seletedIndex,访问方式：
document.forms[0].selectName.selectedIndex;selectedIndex值是用户访问选项属性的关键，其中两个重要的选项属性是text及value，访问格式：
var sel = document.forms[0].selectName; //text属性是select对象显示在屏幕的字符串 var text = sel.options[sel.selectedIndex].text; //options属性 var val = sel.options[sel.selectedIndex].value; //options属性如：
<html> <head> <title>select</title> <script type="text/javascript"> <!-- function goThere(){ //获取select组 var list = document.forms[0].urlList; //打印被选的option文本属性值 alert(list.options[list.selectedIndex].text); //设置窗口需要跳转的URL路径 location.href=list.options[list.selectedIndex].value; } // --> </script> </head> <body> <form> Choose a place to go: <!--onchange()事件处理表示一旦选择后需要作出的动作--> <select name="urlList" onchange="goThere()"> <option selected value="form.html">Home Page <option value="1.html">Stop Our Store <option value="2.html">Shipping Policies <option value="http://www.baidu.com">Search the Web </select> </form> </body> </html>
this关键字向函数传递表单数据及元素
this通常指向对象，对象包含使用该关键字的脚本，利用this作为函数的参数，如：
<input type="button" value="register" onclick="register(this)"/>this访问同一表单的其他元素，使用”this．”的形式，如：
<input type="button" value="enter" onclick="register(this.form)">如：
<html> <head> <title>this关键字</title> <script type="text/javascript"> <!-- function processData(form){ for(var i = 0; i < form.Beatles.length; i++){ if(form.Beatles[i].checked){ break; } } //将值赋给变量以便使用 var beatle = form.Beatles[i].value; var song = form.song.value; alert("Checking whether " + song + " features " + beatle + "..."); } function verifySong(entry){ var song = entry.value; alert("Checking whether " + song + " is a Beatles tune..."); } //--> </script> </head> <body> <form onsubmit="return false"> <p> Choose your favorite Beatles: <input type="radio" name="Beatles" value="Jhon Lennon" checked />Jhon <input type="radio" name="Beatles" value="Paul Cartney" />Paul <input type="radio" name="Beatles" value="George Harrison">George <input type="radio" name="Beatles" value="Ringo Starr" />Ringo </p> <p> Enter the name of your favorite Beatles song:<br/> <input type="text" name="song" value="Eleanor Rigby" onchange="verifySong(this)" /> <input type="button" name="process" value="Process Request..." onclick="processData(this.form)"> </p> </form> </body> </html>
表单的submint()方法与onsubmit事件
- submit()方法不会引起表单的onsubmit事件
onsubmit事件必须加入关键字return，如：
<form onsubmit="return myFun(this)"> <!-- 或者<form onsubmit="return ture(false)"> --> <!--...--> </form>
8.String、Math与Date对象
- String对象
- 两种复制方式：
- var str = “Hello, JScript”;
- 两种复制方式：
字符串方法：
- 转换大小写：
- toUpperCase()
- toLowerCase()
字符串搜索：
string.indexOf()- 确定一个字符串是否包含在另一个中
- 返回值，存在，则返回短字符串在长字符串中起始位置的下标值(0开始)；不存在，返回-1
长字符串在引用中位于方法名的左边，短字符串以参数的形式传入方法中，如：
var str1 = "djh"; var str2 = "abcdrfgoinfhdjheioe"; var pos = str2.indexOf(str1);如：
<html> <head> <title>String</title> <script type="text/javascript"> <!-- function jundge(){ var form = document.forms[0]; var str1 = form.elements[0].value; var str2 = form.elements[1].value; var pos = str2.indexOf(str1); //返回的是第一次匹配到的位置 alert(str1 + "\n" + str2 + "\n" + pos); } // --> </script> </head> <body> <form name="comp"> <input type="text" name="shortStr" /> <input type="text" name="longStr" /> <input type="button" onclick="jundge()" value="判断字符串是否存在" /> </form> </body> </html>
提取字符副本与子字符串：
- charAt():从字符串指定位置提取单个字符
- 参数为要提取字符的下标号(0开始)
- 不会对原字符串产生任何影响
格式：
var str1 = "djhabdc"; var str = str1.charAt(5); //str="d"
- substring():用于提取一个连续的字符串
- 参数为子字符串在原字符串中的起始与终止位置
- 提取的字符不包括结束位置的字符
如：
var str1 = "abscdhfjh"; var str = str1.substring(2,6); //str="scdh"
- 转换大小写：
Math对象:
Math对象的属性通常是常数，如：
Math.PI //π Math.SQRT2 //2的平方根- pow(num1, num2)：求数num1的num2次方
- round(num)：四舍五入的整数
- 随机数的产生(0~1的浮点数)：random()
Date对象：
- 每个窗口一个Date对象
- 静态Date对象与Date对象实例,后者包含一个实际的日期值
如：
var today = new Date(); //不带参数的的调用- 在内部，Date对象实例的值是时间，以毫秒为单位，从1970年1月1日0时开始计算
格式化时间显示，如：
var date = new Date("Month dd, yyyy hh:mm:ss"); var date = new Date("Month dd, yyyy"); var date = new Date(yyyy, MM, dd, hh, mm, ss); var date = new Date(yyyy, MM, dd); var date = new Date(GMT milliseconds from 1/1/1970);Date对象的方法：
getTime()：返回1970年1月1日0时至当前时间的毫秒数，数值区间：0-… getYear()：特定年份减去1900,2000年后为4为年份，数值在区间：70-… getMonth()：年中的月份(0-11) getDate():：月中的日期(1-31) getDay()：星期几(0-6,星期日为0) getHours()：24小时制小时(0-23) getMinutes()：特定小时内的分钟(0-59) getSeconds()：特定分钟内的秒(0-59) setTime(val)、setYear(val)、setMonth(val)、setDate(val)、seyDay(val)、setHours(val)、setMinutes(val)、setSeconds(val)- 设置Date对象值的方法不返回值，而是直接修改调用方法的Date对象的值
- 执行日期计算要求在Date对象的毫秒值上进行处理
如：
<html> <head> <title>date</title> <script type="text/javascript"> <!-- function nextWeek(){ var todayInMS = today.getTime(); var nextWeekInMS = todayInMS + (60 * 60 *24 * 7 *1000); return new Date(nextWeekInMS); } // --> </script> </head> <body> Today is: <script type="text/javascript"> var today = new Date(); document.write(today); </script> <br/> Next week will be: <script type="text/javascript"> document.write(nextWeek()); //或者如下方式(去掉函数)，设置日期对象方法会直接在原来的值上进行修改 //today.setDate(today.getDate + 7); //document.write(today); </script> </body> </html>
JavaScript的案例
广告悬浮(source code from book)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float Adverstisement</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-family: consolas; height: 1000px; background-color: #eeeeee; } #floatAds{ position: absolute; width: 200px; height: 50px; z-index: 1; left: 11px; top: 100px; /*background-color: #000099;*/ font-size: 20px; text-align: center; line-height: 50px; color: #000; } </style> <script type="text/javascript"> //1.register event if(navigator.userAgent.indexOf("MSIE") >= 0){ //判断是否为IE浏览器 window.attachEvent('onscroll', scrollEventHandler); }else{ window.addEventListener('scroll',scrollEventHandler, false); } //2.定义定时器，延时器，悬浮位置 var interval = null; var timeout = null; var targetPosition; //3.初始化广告 function init(){ addEvent(window, 'scroll', scrollEventHandler, false); } //4.广告滑动事件 function scrollEventHandler(){ //根据延时器来执行浮动函数 if(timeout){ clearTimeout(timeout); } setTimeout(startFloat, 50); //设置延时器 } //5.获取广告的位置与当前页面的位置 function startFloat(){ var ads = document.getElementById("floatAds"); targetPosition = (document.body.scrollTop || document.documentElement.scrollTop) + 100; //加100是因为上面的样式设置了初始广告位置为距顶部100px if(parseInt(ads.style.top) != targetPosition){ if(interval != null){ clearInterval(interval); } //6.执行定时函数 interval = setInterval(doFloat, 1); } } //7.广告浮动函数，根据当前位置与广告位置的偏差执行上下浮动 function doFloat(){ var ads = document.getElementById("floatAds"); var currentPosition = ads.offsetTop; if(currentPosition < targetPosition){ ads.style.top = currentPosition + 1 + 'px'; }else if(currentPosition > targetPosition){ ads.style.top = currentPosition - 1 + 'px'; }else{ clearInterval(interval); interval = null; } } window.onload = init; </script> </head> <body> <div id="floatAds">Advertisement</div> </body> </html>页面悬浮控件拖动(source code from book)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drag div</title> <style type="text/css"> #drag{ position: absolute; width: 200px; height: 115px; z-index: 1; left: 40px; top: 51px; background-color: lightpink; cursor: pointer; } </style> <script type="text/javascript"> //绑定事件 function addEvent(obj, name, handler, useCapture){ if(navigator.userAgent.indexOf("MSIC") >= 0){ obj.attachEvent('on' + name, handler); }else{ obj.addEventListener(name, handler, useCapture); } } //定义标志位以及X,Y坐标的数组 var dragable = false; //当前是否是拖动的开关 var mousePosition = []; //鼠标位置缓存 //设定鼠标按下的处理事件 function mousedownEventHandler(evt){ dragable = true; //获取当前鼠标的位置 var mouseX = (document.body.scrollLeft || document.documentElement.scrollLeft) + evt.clientX; //鼠标X坐标 var mouseY = (document.body.scrollTop || document.documentElement.scrollTop) + evt.clientY; //鼠标的Y坐标 mousePosition = [mouseX, mouseY]; } //设置鼠标移动的处理事件 function mousemoveEventHandler(evt){ //当鼠标未按下时，不做处理 if(!dragable){ return; } //获取当前鼠标的坐标 var mouseX = (document.body.scrollLeft || document.documentElement.scrollLeft) + evt.clientX; var mouseY = (document.body.scrollTop || document.documentElement.scrollTop) + evt.clientY; //改变控件的坐标 div.style.left = div.offsetLeft + mouseX - mousePosition[0] + 'px'; div.style.top = div.offsetTop + mouseY - mousePosition[1] + 'px'; //数组更新最新的坐标 mousePosition = [mouseX, mouseY]; } //鼠标松开的处理事件 function mouseupEventHandler(){ dragable = false; } //初始化事件 function init(){ div = document.getElementById("drag"); addEvent(div, 'mousedown', mousedownEventHandler, false); addEvent(document, 'mousemove', mousemoveEventHandler, false); addEvent(div, 'mouseup', mouseupEventHandler, false); } window.onload = init; </script> </head> <body> <div id="drag"></div> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
