在Editplus中用control怎么打开总图+鼠标打开一个DHTML.js文件就能看到系统函数的具体解析,请大神指点是怎么设置的
点击联系发帖人
时间：2018-04-09 15:26
1添加评论分享收藏感谢收起#KEYWORD=DHTML methods
createElement
getElementById
getElementsByName
getElementsByTagName
getAttribute
setAttribute
addEventListener
removeEventListener
stopPropagation
preventDefault
setInterval
clearInterval
setTimeout
clearTimeout
setCapture
getBoundingClientRect
requestAnimationFrame
encodeURIComponent
decodeURIComponent
赞同 添加评论分享收藏感谢收起写回答这个功能是很久之前实现的，现在发上来，很长一段时间没更新博客了，真惭愧。这个JS代码还有很多修改的空间，先发上来，以后再发个更新的版本吧。
这是效果图：
【HTML代码】
&div&id=&menu&&
&&&&&ul&id=&nav&&
&&&&&&&&&li&&a&href=&#&&
class=&selected&&tab1&/a&&/li&
&&&&&&&&&li&&a&href=&#&&
class=&&&tab2&/a&&/li&
&&&&&&&&&li&&a&href=&#&&
class=&&&tab3&/a&&/li&
&&&&&&&&&div&style=&clear:both&&&/div&
&&&&&div&id=&menu_con&&
&&&&&&&&&div&class=&tag&
style=&display:block&&
&&&&&&&&&&&&这是TAB切换效果区域1
&&&&&&&&&&/div&
&&&&&&&&&div&class=&tag&
style=&display:none&&
&&&&&&&&&&&&这是TAB切换效果区域2&&&
&&&&&&&&&&/div&
&&&&&&&&&div&class=&tag&&
style=&display:none&&
&&&&&&&&&&&&这是TAB切换效果区域3
&&&&&&&&&/div&
var&tabs=function(){
&&&&function&tag(name,elem){
&&&&&&&&return&(elem||document).getElementsByTagName(name);
&&&&function&id(name){
&&&&&&&&return&document.getElementById(name);
&&&&function&first(elem){
&&&&&&&&elem=elem.firstC
&&&&&&&&return&elem&&elem.nodeType==1?
elem:next(elem);
&&&&function&next(elem){
&&&&&&&&do{
&&&&&&&&&&&&elem=elem.nextS&
&&&&&&&&}while(
&&&&&&&&&&&&elem&&elem.nodeType!=1&
&&&&&&&&return&
&&&&return&{
&&&&&&&&set:function(elemId,tabId){
&&&&&&&&&&&&var&elem=tag(&li&,id(elemId));
&&&&&&&&&&&&var&tabs=tag(&div&,id(tabId));
&&&&&&&&&&&&var&listNum=elem.
&&&&&&&&&&&&var&tabNum=tabs.
&&&&&&&&&&&&for(var&i=0;i&listNi++){
&&&&&&&&&&&&&&&&&&&&elem[i].onclick=(function(i){
&&&&&&&&&&&&&&&&&&&&&&&&return&function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&for(var&j=0;j&tabNj++){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&if(i==j){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&tabs[j].style.display=&block&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&elem[j].firstChild.className=&selected&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&else{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&tabs[j].style.display=&none&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&elem[j].firstChild.className=&&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&})(i)
&&&&&&&&&&&&}
window.onload=function(){
&&&&tabs.set(&nav&,&menu_con&);
background:#FFF;}
a{color:#585858}
#menu{width:360}
#nav {display:width:100%;padding:0;margin:0;list-style:
&background:url(../images/bg.gif)}
#nav li {float:width:120}
#nav li a {display:line-height:27text-decoration:padding:0 0 0 5 text-align:center}
#menu_con{
width:358 height:135border:1px solid #BF9660; border-top:none}
.selected{background:url(../images/tag_bg.gif);}
clear:both}
调用方法：
tabs.set(&nav&,&menu_con&);
代码下载 点击
只实现了点击切换的效果
[javascript]&&
/全选取消按钮函数&&
function&checkAll(chkobj)&{&&
&&&&if&($(chkobj).text()&==&&全选&)&{&&
&&&&&&&&$(chkobj).children(&span&).text(&取消&);&&
&&&&&&&&$(&.checkall&input:enabled&).prop(&checked&,&true);&&
&&&&}&else&{&&
&&&&&&&&$(chkobj).children(&span&).text(&全选&);&&
&&&&&&&&$(&.checkall&input:enabled&).prop(&checked&,&false);&&
function&checkNumber(e)&{&&
&&&&var&keynum&=&window.event&?&e.keyCode&:&e.&&
&&&&if&((48&&=&keynum&&&&keynum&&=&57)&||&keynum&==&8)&{&&
&&&&&&&&return&true;&&
&&&&}&else&{&&
&&&&&&&&return&false;&&
function&checkForFloat(obj,&e)&{&&
&&&&var&isOK&=&false;&&
&&&&var&key&=&window.event&?&e.keyCode&:&e.&&
&&&&if&((key&&&95&&&&key&&&106)&||&&&
&&&&&&&&(key&&&47&&&&key&&&60)&||&&&&
&&&&&&&&(key&==&110&&&&obj.value.indexOf(&.&)&&&0)&||&&&
&&&&&&&&(key&==&190&&&&obj.value.indexOf(&.&)&&&0)&||&&&
&&&&&&&&&key&==&8&||&key&==&9&||&key&==&46&||&key&==&37&||&key&==&39)&{&&
&&&&&&&&isOK&=&true;&&
&&&&}&else&{&&
&&&&&&&&if&(window.event)&{&&&
&&&&&&&&&&&&e.returnValue&=&false;&&&&&
&&&&&&&&}&else&{&&&
&&&&&&&&&&&&e.preventDefault();&&
&&&&&&&&}&&
&&&&return&isOK;&&&&
function&checktxt(obj,&txtId)&{&&
&&&&var&txtCount&=&$(obj).val().&&
&&&&if&(txtCount&&&1)&{&&
&&&&&&&&return&false;&&
&&&&var&smsLength&=&Math.ceil(txtCount&/&62);&&
&&&&$(&#&&+&txtId).html(&您已输入&b&&&+&txtCount&+&&&/b&个字符，将以&b&&&+&smsLength&+&&&/b&条短信扣取费用。&);&&
function&ForDight(Dight,&How)&{&&
&&&&Dight&=&Math.round(Dight&*&Math.pow(10,&How))&/&Math.pow(10,&How);&&
&&&&return&D&&
function&addCookie(objName,&objValue,&objHours)&{&&
&&&&var&str&=&objName&+&&=&&+&escape(objValue);&&
&&&&if&(objHours&&&0)&{&&
&&&&&&&&var&date&=&new&Date();&&
&&&&&&&&var&ms&=&objHours&*&3600&*&1000;&&
&&&&&&&&date.setTime(date.getTime()&+&ms);&&
&&&&&&&&str&+=&&;&expires=&&+&date.toGMTString();&&
&&&&document.cookie&=&&&
function&getCookie(objName)&{&&
&&&&var&arrStr&=&document.cookie.split(&;&&);&&
&&&&for&(var&i&=&0;&i&&&arrStr.&i++)&{&&
&&&&&&&&var&temp&=&arrStr[i].split(&=&);&&
&&&&&&&&if&(temp[0]&==&objName)&return&unescape(temp[1]);&&
&&&&return&&&;&&
function&jsprint(msgtitle,&url,&callback)&{&&
&&&&var&d&=&dialog({&content:&msgtitle&}).show();&&
&&&&setTimeout(function&()&{&&
&&&&&&&&d.close().remove();&&
&&&&},&2000);&&
&&&&if&(url&==&&back&)&{&&
&&&&&&&&frames[&mainframe&].history.back(-1);&&
&&&&}&else&if&(url&!=&&&)&{&&
&&&&&&&&frames[&mainframe&].location.href&=&&&
&&&&if&(arguments.length&==&3)&{&&
&&&&&&&&callback();&&
function&jsdialog(msgtitle,&msgcontent,&url,&callback)&{&&
&&&&var&d&=&dialog({&&
&&&&&&&&title:&msgtitle,&&
&&&&&&&&content:&msgcontent,&&
&&&&&&&&okValue:&'确定',&&
&&&&&&&&ok:&function&()&{&},&&
&&&&&&&&onclose:&function&()&{&&
&&&&&&&&&&&&if&(url&==&&back&)&{&&
&&&&&&&&&&&&&&&&history.back(-1);&&
&&&&&&&&&&&&}&else&if&(url&!=&&&)&{&&
&&&&&&&&&&&&&&&&location.href&=&&&
&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&if&(argnum&==&5)&{&&
&&&&&&&&&&&&&&&&callback();&&
&&&&&&&&&&&&}&&
&&&&&&&&}&&
&&&&}).showModal();&&
function&ShowMaxDialog(tit,&url)&{&&
&&&&dialog({&&
&&&&&&&&title:&tit,&&
&&&&&&&&url:&url&&
&&&&}).showModal();&&
function&ExePostBack(objId,&objmsg)&{&&
&&&&if&($(&.checkall&input:checked&).size()&&&1)&{&&
&&&&&&&&parent.dialog({&&
&&&&&&&&&&&&title:&'提示',&&
&&&&&&&&&&&&content:&'对不起，请选中您要操作的记录！',&&
&&&&&&&&&&&&okValue:&'确定',&&
&&&&&&&&&&&&ok:&function&()&{&}&&
&&&&&&&&}).showModal();&&
&&&&&&&&return&false;&&
&&&&var&msg&=&&删除记录后不可恢复，您确定吗？&;&&
&&&&if&(arguments.length&==&2)&{&&
&&&&&&&&msg&=&&&
&&&&parent.dialog({&&
&&&&&&&&title:&'提示',&&
&&&&&&&&content:&msg,&&
&&&&&&&&okValue:&'确定',&&
&&&&&&&&ok:&function&()&{&&
&&&&&&&&&&&&__doPostBack(objId,&'');&&
&&&&&&&&},&&
&&&&&&&&cancelValue:&'取消',&&
&&&&&&&&cancel:&function&()&{&}&&
&&&&}).showModal();&&
&&&&return&false;&&
function&CheckPostBack(objId,&objmsg)&{&&
&&&&var&msg&=&&对不起，请选中您要操作的记录！&;&&
&&&&if&(arguments.length&==&2)&{&&
&&&&&&&&msg&=&&&
&&&&if&($(&.checkall&input:checked&).size()&&&1)&{&&
&&&&&&&&parent.dialog({&&
&&&&&&&&&&&&title:&'提示',&&
&&&&&&&&&&&&content:&msg,&&
&&&&&&&&&&&&okValue:&'确定',&&
&&&&&&&&&&&&ok:&function&()&{&}&&
&&&&&&&&}).showModal();&&
&&&&&&&&return&false;&&
&&&&__doPostBack(objId,&'');&&
&&&&return&false;&&
function&ExeNoCheckPostBack(objId,&objmsg)&{&&
&&&&var&msg&=&&删除记录后不可恢复，您确定吗？&;&&
&&&&if&(arguments.length&==&2)&{&&
&&&&&&&&msg&=&&&
&&&&parent.dialog({&&
&&&&&&&&title:&'提示',&&
&&&&&&&&content:&msg,&&
&&&&&&&&okValue:&'确定',&&
&&&&&&&&ok:&function&()&{&&
&&&&&&&&&&&&__doPostBack(objId,&'');&&
&&&&&&&&},&&
&&&&&&&&cancelValue:&'取消',&&
&&&&&&&&cancel:&function&()&{&}&&
&&&&}).showModal();&&
&&&&return&false;&&
前言：之前分享了那么多bootstrap组件的使用经验，这篇博主打算研究下JS组件的扩展和封装，我们来感受下JQuery为我们提供$.Extend的神奇，看看我们怎么自定义自己的组件，比如我们想扩展一个$(&#id&).MyJsControl({})做我们自己的组件，我们该如何去做呢，别急，我们慢慢来看看过程。
一、扩展已经存在的组件
1、需求背景
很多时候，我们使用jquery.ajax的方式向后台发送请求，型如
$.ajax({
type: &post&,
url: &/User/Edit&,
data: { data: JSON.stringify(postdata) },
success: function (data, status) {
if (status == &success&) {
toastr.success('提交数据成功');
$(&#tb_aaa&).bootstrapTable('refresh');
error: function (e) {
complete: function () {
这种代码太常见了，这个时候我们有这样一个需求：在自己调用ajax请求的时候，我们不想每次都写error:function(e){}这种代码，但是我们又想让它每次都将ajax的错误信息输出到浏览器让用户能够看到。怎么办呢？
2、实现原理
要想实现以上效果其实并不难，我们可以将$.ajax({})封装一层，在封装的公共方法里面定义error对应的事件即可。确实，这样能达到我们的要求，但是并不完美，原因很简单：1）在jquery的基础上面再封装一层，效率不够高；2）需要改变调用者的习惯，每次调用ajax的时候需要按照我们定义的方法的规则来写，而不能直接用原生的$.ajax({})这种写法，这是我们不太想看到。
既然如此，那我们如何做到既不封装控件，又能达到以上要求呢？答案就是通过我们的$.extend去扩展原生的jquery.ajax。
其实实现起来也并不难，通过以下一段代码就能达到我们的要求。
(function ($) {
//1.得到$.ajax的对象
var _ajax = $.
$.ajax = function (options) {
//2.每次调用发送ajax请求的时候定义默认的error处理方法
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
success: function (data, textStatus) { },
beforeSend: function (XHR) { },
complete: function (XHR, TS) { }
//3.如果在调用的时候写了error的处理方法，就不用默认的
if (options.error) {
fn.error = options.
if (options.success) {
fn.success = options.
if (options.beforeSend) {
fn.beforeSend = options.beforeS
if (options.complete) {
fn.complete = options.
//4.扩展原生的$.ajax方法，返回最新的参数
var _options = $.extend(options, {
error: function (XMLHttpRequest, textStatus, errorThrown) {
fn.error(XMLHttpRequest, textStatus, errorThrown);
success: function (data, textStatus) {
fn.success(data, textStatus);
beforeSend: function (XHR) {
fn.beforeSend(XHR);
complete: function (XHR, TS) {
fn.complete(XHR, TS);
//5.将最新的参数传回ajax对象
_ajax(_options);
})(jQuery);
如果没接触过jquery里面$.extend这个方法的童鞋可能看不懂以上是什么意思。好，我们首先来看看jquery API对$.extend()方法是作何解释的。
什么意思呢？我们来看官方的两个例子就知道了
var settings = { validate: false, limit: 5, name: &foo& };
var options = { validate: true, name: &bar& };
$.extend(settings, options);
settings == { validate: true, limit: 5, name: &bar& }
var empty = {};
var defaults = { validate: false, limit: 5, name: &foo& };
var options = { validate: true, name: &bar& };
var settings = $.extend(empty, defaults, options);
settings == { validate: true, limit: 5, name: &bar& }
empty == { validate: true, limit: 5, name: &bar& }
以上的两个简单例子就说明extend()方法作用就是合并另个对象，有相同的则覆盖，没有相同的则添加。就是这么简单。
了解了$.extend()的作用，我们就能大概看懂上面那个扩展jquery.ajax的实现了吧。主要的步骤分为：
1）定义默认的error处理方法。
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
success: function (data, textStatus) { },
beforeSend: function (XHR) { },
complete: function (XHR, TS) { }
2）判断用户在调用$.ajax({})的时候是否自定了error:function(){}，如果定义过，则使用用户定义的，反之则用默认的error处理方法。
3）使用$.extend()将error默认处理方法传入$.ajax()的参数中。我们看options参数时包含$.ajax()方法里面所有的参数的，然后用默认的fn去扩展它即可。
通过以上三步就能够实现对$.ajax()方法里面error默认处理方法。这样扩展，对于我们使用者来说完全感觉不到变化，我们仍然可以$.ajax({});这样去发送ajax请求，如果没有特殊情况，不用写error处理方法。
3、组件扩展的意义
使用组件扩展，能够帮助我们在原有组件上面增加一些和我们系统业务相关的处理需求，而在使用时，还是和使用原生组件一样去调用，免去了在组件上面再封装一层的臃肿。
二、扩展自己组件
上面通过$.extend()方法扩展了$.ajax()的error事件处理方法。下面我们来封装一个自己的组件试试，功能很简单，但比较有说明性。我们就以select这个组件为例，很多情况下，我们的select里面的option都是需要从数据库里面取数据的，所以一般的做法就是发送一个ajax请求，然后在success方法里面拼html。现在我们就封装一个select远程取数据的方法。
1、代码实现以及使用示例
先上干货吧，将写好的整出来：
(function ($) {
//1.定义jquery的扩展方法combobox
$.fn.combobox = function (options, param) {
if (typeof options == 'string') {
return $.fn.combobox.methods[options](this, param);
//2.将调用时候传过来的参数和default参数合并
options = $.extend({}, $.fn.combobox.defaults, options || {});
//3.添加默认值
var target = $(this);
target.attr('valuefield', options.valueField);
target.attr('textfield', options.textField);
target.empty();
var option = $('&option&&/option&');
option.attr('value', '');
option.text(options.placeholder);
target.append(option);
//4.判断用户传过来的参数列表里面是否包含数据data数据集，如果包含，不用发ajax从后台取，否则否送ajax从后台取数据
if (options.data) {
init(target, options.data);
//var param = {};
options.onBeforeLoad.call(target, options.param);
if (!options.url) return;
$.getJSON(options.url, options.param, function (data) {
init(target, data);
function init(target, data) {
$.each(data, function (i, item) {
var option = $('&option&&/option&');
option.attr('value', item[options.valueField]);
option.text(item[options.textField]);
target.append(option);
options.onLoadSuccess.call(target);
target.unbind(&change&);
target.on(&change&, function (e) {
if (options.onChange)
return options.onChange(target.val());
//5.如果传过来的是字符串，代表调用方法。
$.fn.combobox.methods = {
getValue: function (jq) {
return jq.val();
setValue: function (jq, param) {
jq.val(param);
load: function (jq, url) {
$.getJSON(url, function (data) {
jq.empty();
var option = $('&option&&/option&');
option.attr('value', '');
option.text('请选择');
jq.append(option);
$.each(data, function (i, item) {
var option = $('&option&&/option&');
option.attr('value', item[jq.attr('valuefield')]);
option.text(item[jq.attr('textfield')]);
jq.append(option);
//6.默认参数列表
$.fn.combobox.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '请选择',
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
})(jQuery);
先来看看我们自定义组件如何使用：
用法一：通过URL远程取数据并初始化
首先定义一个空的select&
&select id=&sel_search_plant& class=&form-control&&&/select&
然后初始化它
$(function(){
$('#sel_search_plant').combobox({
url: '/apiaction/Plant/Find',
valueField: 'TM_PLANT_ID',
textField: 'NAME_C'
参数很简单，就不一一介绍了。很简单有木有~~
用法二：取值和设置
var strSelectedValue = $('#sel_search_plant').combobox(&getValue&);
$('#sel_search_plant').combobox(&setValue&, &aaa&);
其实对于简单的select标签，博主觉得这里的getValu和SetValue意义不大，因为直接通过$('#sel_search_plant').val()就能解决的事，何必要再封一层。这里仅仅是做演示，试想，如果是封装成类似select2或者multiselect这种组件，getValue和setValue的意义就有了，你觉得呢？
2、代码详细讲解
上面的实现代码，如果您一眼就能看懂，证明您是经常封组件的大虾了，下面的就不用看了。如果看不懂，也没关系，我们将代码拆开详细看看里面是什么鬼。
（1）首先看看我们最常看到的如下写法：
(function ($) {
//....封装组件逻辑
})(jQuery);
初初看到这种用法，博主也是狂抓，这是什么鬼嘛，四不像啊。使用多了之后才知道原来这就是一个匿名函数的形式。将它拆开来看如下：
var fn = function($){
//.....组件封装逻辑
fn(jQuery);
也就是说这种写法就表示先定义一个方法，然后立即调用这个方法，jQuery相当于实参。打开jquery.js的原文件可以看到，jQuery是这个文件里面的一个全局变量。
（2）定义自己的组件的代码：
$.fn.combobox = function (options, param) {
习惯这种写法的应该知道，这个就表示向jquery对象添加自定义方法，比如你想使用文章开始的&$(&#id&).MyJsControl({})&这种用法，你就可以这样定义&$.fn.MyJsControl=function(options){}&。
（3）&options = $.extend({}, $.fn.combobox.defaults,
options || {});&这一句，看过上文的朋友应该还记得extend这么一个方法吧，怎么样，又来了你。这句话其实就没什么好说的了，合并默认参数和用户传进来的参数。
（4）默认参数列表
$.fn.combobox.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '请选择',
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
如果用户没有传参，就用默认的参数列表。如果你够细心，你会发现博主之前分享的其他bootstrap组件的js文件里面都有这么一个default参数列表。我们随便找两个：
bootstrap上传组件
bootstrap table组件
基本都是这么些用法。这样来看，是否也可以自己封一个js组件~~
以上就是博主对js组件扩展以及封装用法的认识和总结。当然，都是些比较简单基础的封装，如果想要实现类似bootstrap table的组件，那还差得很远。不过万丈高楼平地起，只要打好基础，封一个自己的table组件也不是什么大问题。文中如果有理解不对的地方，欢迎指出，博主将不胜感激。如果本文能够对你有丝毫帮助，麻烦抬起你的小手点个推荐，博主一定继续努力，将更好的文章分享给大家。
document对象]
该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
alinkColor 活动链接的颜色(ALINK)
anchor 一个HTMI锚点,使用&A NAME=&标记创建(该属性本身也是一个对象)
anchors array 列出文档锚点对象的数组(&A NAME=&)(该属性本身也是一个对象)
bgColor 文档的背景颜色(BGCOLOR)
cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
fgColor 文档的文本颜色(&BODY&标记里的TEXT特性)
form 文档中的一个窗体(&FORM&)(该属性本身也是一个对象)
forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
lastModified 文档最后的修改日期
linkColor 文档的链接的颜色,即&BODY&标记中的LINK特性(链接到用户没有观察到的文档)
link 文档中的一个&A HREF=&标记(该属性本身也是一个对象)
links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
title 文档的标题((TITLE&)
vlinkColor 指向用户已观察过的文档的链接文本颜色,即&BODY&标记的VLINK特性
clear 清除指定文档的内容
close 关闭文档流
open 打开文档流
write 把文本写入文档
writeln 把文本写入文档,并以换行符结尾
[window对象]
它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。
defaultStatus 缺省的状态条消息
document 当前显示的文档(该属性本身也是一个对象)
frame 窗口里的一个框架((FRAME&)(该属性本身也是一个对象)
frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)
history 窗口的历史列表(该属性本身也是一个对象)
length 窗口内的框架数
location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location(因为这是当前显示文档的位置)
name 窗口打开时,赋予该窗口的名字
opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)
parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
self 当前窗口或框架的同义词
status 状态条中的消息
top 包含当前框架的最顶层浏览器窗口的同义词
window 当前窗口或框架的同义词,与self相同
alert() 打开一个Alert消息框
clearTimeout() 用来终止setTimeout方法的工作
close() 关闭窗口
confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false
blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)
focus() 把指定的窗口带到前台(另一个新方法)
open() 打开一个新窗口
prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序
事件处理程序
Onload() 页面载入时触发
Onunload() 页面关闭时触发
5.几种常见的JavaScript特效
①页面显示大广告图片及其自动关闭&
在打开一个页面时，常常会出现一个大广告图片显示网站的最新活动等，一般广告显示5秒左右，广告又会自己关闭，这个是怎么实现的？&
其实只需要将图片加在网页合适的位置，然后再写一个删去隐藏图片元素的函数，并设置n秒后执行：
function showAd(){
var Pic = document.getElementById('ad');
setTimeout(function() {
Pic.style.display = 'none';
window.onload=showAd;12345678
②输入完成后进行校验&
实际上只需要在input标签里面添加一个onblur属性，该属性绑定一个用于校验的函数即可：
type=&text& id=&name& onblur=&validateTel()&/&
function validateTel(){
alert(&do something&);
③勾选全部复选框&
在网站中，如果复选框较多，会有一个全选按钮，点击后，所有复选框会被选中：
charset=&utf-8& /&
你的爱好是：&
type=&checkbox& name=&hobby& value=&& /&篮球
type=&checkbox& name=&hobby& value=&&/&足球
type=&checkbox& name=&hobby& value=&&/&网球
type=&checkbox& name=&hobby& value=&&/&乒乓
type=&checkbox& name=&hobby& value=&&/&游泳
type=&checkbox& name=&hobby& id=&selectall& value=& & onclick=&SelectAll()&/&全选
function SelectAll(){
if(document.getElementById('selectall').checked == true){
var allValue = document.getElementsByName('hobby');
for(var i=0;i&allValue.i++){
allValue[i].checked=true;
6.常见40个常用的js页面效果图
1. oncontextmenu=&window.event.returnValue=false& 将彻底屏蔽鼠标右键
&table border oncontextmenu=return(false)&&td&no&/table& 可用于Table
2. &body onselectstart=&return false&& 取消选取、防止复制
3. onpaste=&return false& 不准粘贴
4. oncopy=&& oncut=&& 防止复制
5. &link rel=&Shortcut Icon& href=&favicon.ico&& IE地址栏前换成自己的图标
6. &link rel=&Bookmark& href=&favicon.ico&& 可以在收藏夹中显示出你的图标
7. &input style=&ime-mode:disabled&& 关闭输入法
8. 永远都会带着框架
&script language=&JavaScript&&&!--
if (window == top)top.location.href = &frames.htm&; //frames.htm为框架网页
// --&&/script&
9. 防止被人frame
&SCRIPT LANGUAGE=JAVASCRIPT&&!--&
if (top.location != self.location)top.location=self.
// --&&/SCRIPT&
10. 网页将不能被另存为
&noscript&&iframe src=&/blog/*.html&&;&/iframe&&/noscript&
11. &input type=button value=查看网页源代码&
onclick=&window.location = &view-source:&+ &&&&
12.删除时确认
&a href=&javascript：if(confirm(&确实要删除吗?&))location=&boos.asp?&areyou=删除&page=1&&&删除&/a&
13. 取得控件的绝对位置
//Javascript
&script language=&Javascript&&
function getIE(e){
var t=e.offsetT
var l=e.offsetL
while(e=e.offsetParent)
alert(&top=&+t+&/nleft=&+l);
//VBScript
&script language=&VBScript&&&!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName&&&BODY&
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
msgbox &top=&&t&chr(13)&&left=&&l,64,&得到控件的位置&
end function
--&&/script&
14. 光标是停在文本框文字的最后
&script language=&javascript&&
function cc()
var e = event.srcE
var r =e.createTextRange();
r.moveStart(&character&,e.value.length);
r.collapse(true);
r.select();
&input type=text name=text1 value=&123& onfocus=&cc()&&
15. 判断上一页的来源
javascript：
document.referrer
16. 最小化、最大化、关闭窗口
&object id=hh1 classid=&clsid:ADB880A6-D8FF-11CF-3B7A11&&&
¶m name=&Command& value=&Minimize&&&/object&
&object id=hh2 classid=&clsid:ADB880A6-D8FF-11CF-3B7A11&&&
¶m name=&Command& value=&Maximize&&&/object&
&OBJECT id=hh3 classid=&clsid:adb880a6-d8ff-11cf-3b7a11&&
&PARAM NAME=&Command& VALUE=&Close&&&/OBJECT&
&input type=button value=最小化 onclick=hh1.Click()&
&input type=button value=最大化 onclick=hh2.Click()&
&input type=button value=关闭 onclick=hh3.Click()&
本例适用于IE
17.屏蔽功能键Shift,Alt,Ctrl
function look(){&
if(event.shiftKey)&
alert(&禁止按Shift键!&); //可以换成ALT CTRL
document.onkeydown=&
18. 网页不会被缓存
&META HTTP-EQUIV=&pragma& CONTENT=&no-cache&&
&META HTTP-EQUIV=&Cache-Control& CONTENT=&no-cache, must-revalidate&&
&META HTTP-EQUIV=&expires& CONTENT=&Wed, 26 Feb :57 GMT&&
或者&META HTTP-EQUIV=&expires& CONTENT=&0&&
19.怎样让表单没有凹凸感？
&input type=text style=&border:1 solid #000000&&&
&input type=text style=&border-left: border-right: border-top: border-bottom:
1 solid #000000&&&/textarea&
20.&div&&span&&&layer&的区别？&
&div&(division)用来定义大段的页面元素，会产生转行&
&span&用来定义同一行内的元素，跟&div&的唯一区别是不产生转行&
&layer&是ns的标记，ie不支持，相当于&div&
21.让弹出窗口总是在最上面:
&body onblur=&this.focus();&&
22.不要滚动条?&
让竖条没有:&
&body style=&overflow:overflow-y:hidden&&&
让横条没有:&
&body style=&overflow:overflow-x:hidden&&&
两个都去掉？更简单了&
&body scroll=&no&&&
23.怎样去掉图片链接点击后，图片周围的虚线？
&a href=&#& onFocus=&this.blur()&&&img src=&/blog/logo.jpg& border=0&&/a&
24.电子邮件处理提交表单
&form name=&form1& method=&post& action=&&
enctype=&text/plain&&&
&input type=submit&
25.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()
26.如何设定打开页面的大小
&body onload=&top.resizeTo(300,200);&&
打开页面的位置&body onload=&top.moveBy(300,200);&&
27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动&
{background-image:url(/blog/logo.gif); background-repeat:no-&
background-position:background-attachment: fixed}&
28. 检查一段字符串是否全由数字组成
&script language=&Javascript&&&!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum(&&))
alert(checkNum(&&))
// --&&/script&
29. 获得一个窗口的大小
document.body.clientW document.body.clientHeight
30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert(&含有汉字&);
else alert(&全是字符&);
31.TEXTAREA自适应文字行数的多少
&textarea rows=1 name=s1 cols=27 onpropertychange=&this.style.posHeight=this.scrollHeight&&
&/textarea&
32. 日期减去天数等于第二个日期
&script language=Javascript&
function cc(dd,dadd)
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + &年& + (a.getMonth() + 1) + &月& + a.getDate() + &日&)
cc(&12/23/2002&,2)
33. 选择了哪一个Radio
&HTML&&script language=&vbscript&&
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
end function
&/script&&BODY&
&INPUT name=&radio1& type=&radio& value=&style& checked&Style
&INPUT name=&radio1& type=&radio& value=&barcode&&Barcode
&INPUT type=&button& value=&check& onclick=&checkme()&&
&/BODY&&/HTML&
34.脚本永不出错
&SCRIPT LANGUAGE=&JavaScript&&&
&!-- Hide&
function killErrors() {&
window.onerror = killE&
35.ENTER键可以让光标移到下一个输入框
&input onkeydown=&if(event.keyCode==13)event.keyCode=9&&
36. 检测某个网站的链接速度：
把如下代码加入&body&区域中:
&script language=Javascript&
setInterval(&tim++&,100)
var autourl=new Array()
autourl[1]=&&
autourl[2]=&javacool.3322.net&
autourl[3]=&&
autourl[4]=&&
autourl[5]=&&
function butt(){
document.write(&&form name=autof&&)
for(var i=1;i&autourl.i++)
document.write(&&input type=text name=txt&+i+& size=10 value=&/blog/测试中......&& =》&input type=text&
name=url&+i+& size=40& =》&input type=button value=GO
onclick=window.open(this.form.url&+i+&.value)&&br&&)
document.write(&&input type=submit value=刷新&&/form&&)
function auto(url)
b++
function run(){for(var i=1;i&autourl.i++)document.write(&&img src=http://&+autourl+&/&+Math.random()+& width=1 height=1
onerror=auto(&+&&)&&)}
run()&/script&
37. 各种样式的光标
auto ：标准光标
default ：标准箭头
hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：?帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标
38.页面进入和退出的特效
进入页面&meta http-equiv=&Page-Enter& content=&revealTrans(duration=x, transition=y)&&
推出页面&meta http-equiv=&Page-Exit& content=&revealTrans(duration=x, transition=y)&&&&
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
0 矩形缩小&
1 矩形扩大&
2 圆形缩小
3 圆形扩大&
4 下到上刷新&
5 上到下刷新
6 左到右刷新&
7 右到左刷新&
8 竖百叶窗
9 横百叶窗&
10 错位横百叶窗&
11 错位竖百叶窗
12 点扩散&
13 左右到中间刷新&
14 中间到左右刷新
15 中间到上下
16 上下到中间&
17 右下到左上
18 右上到左下&
19 左上到右下&
20 左下到右上
21 横条&
22 竖条&
23 以上22种随机选择一种
39.在规定时间内跳转
&META http-equiv=V=&REFRESH& content=&5;URL=&&
40.网页是否被检索
&meta name=&ROBOTS& content=&属性值&&
其中属性值有以下一些:
属性值为&all&: 文件将被检索，且页上链接可被查询；
属性值为&none&: 文件不被检索，而且不查询页上的链接；
属性值为&index&: 文件将被检索；
属性值为&follow&: 查询页上的链接；
属性值为&noindex&: 文件不检索，但可被查询链接；
属性值为&nofollow&: 文件不被检索，但可查询页上的链接。
最大化窗口？
&script language=&JavaScript&&
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
解决问题：由于层与下拉框之间的优先级是：下拉框 & 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的 z-index 属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下：
&div id=&menu& style=&position: visibility: top:20 left:20 width:100 height:200 background-color:#6699&&
& &tr&&td&item 1&/td&&/tr&
& &tr&&td&item 2&/td&&/tr&
& &tr&&td&item 3&/td&&/tr&
& &tr&&td&item 4&/td&&/tr&
& &tr&&td&item 5&/td&&/tr&
& &/table&
& &iframe src=&/blog/javascript：false& style=&position: visibility: top:0 left:0 width:100 height:200 z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';&&&/iframe&
&a href=&#& onclick=&document.getElementById('menu').style.visibility='visible'&&menu&/a&
& &select&&option&A form selection list&/option&&/select&
输入框也可以做的很漂亮了
&div align=¢er&&&input type=&hidden& name=&hao& value=&yes&&
&&&&&&&&&&&&& 外向数：&input&
&&&&& name=answer&
&&&&& style=&color: rgb(255,0,0); border-left: border-right: border-top: border-bottom: 1px solid rgb(192,192,192)&&
&&&&&&&&&&& 没回答的题数：&input&
&&&&& name=unanswer id=&unanswer&&
&&&&& style=&color: rgb(255,0,0); border-left: border-right: border-top: border-bottom: 1px solid rgb(192,192,192)&&
&&&&&&&&&&& &br&
&&&&&&&&&&& 总得分:
&&&&&&&&&&& &input&
&&&&& name=score id=&score&&
&&&&& style=&color: rgb(255,0,0); border-left: border-right: border-top: border-bottom: 1px solid rgb(192,192,192)&&
&&&&&&&&&&& 结 论:
&&&&&&&&&&& &input&
&&&&& name=xgjg id=&xgjg&&
&&&&& style=&color: rgb(255,0,0); border-left: border-right: border-top: border-bottom: 1px solid rgb(192,192,192)&&
&&&&&&&&&&& &br&
&&&&&&&&&&& &br&&
&&&&&&&&&&&&
&&&&&&&&&&& &input onClick=processForm(this.form) style=&FONT-FAMILY: 宋体; FONT-SIZE: 9pt& type=button value=查看结果 name=&button&&&
&&&&&&&&&&&& &input type=&reset& name=&Submit& value=&重做&&
&&&&&&&&&&& &/div&
注意：修改&body&为&body onload=&max.Click()&&即为打开最大
化窗口，而如果改为&body onload=&min.Click()&&就变为窗口一打开就最小化
&object id=&min& type=&application/x-oleobject& classid=&clsid:adb880a6-d8ff-11cf-3b7a11&&
&&&&&&&&&&& ¶m name=&Command& value=&Minimize&&
&&&&&&&&& &/object& &object id=&max& type=&application/x-oleobject& classid=&clsid:adb880a6-d8ff-11cf-3b7a11&&
&&&&&&&&&&& ¶m name=&Command& value=&Maximize&&
&&&&&&&&& &/object&
页面自动刷新（说明）
当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。
1，页面自动刷新：把如下代码加入&head&区域中&meta http-equiv=&refresh& content=&20&&,其中20指每隔20秒刷新一次页面.
2，页面自动跳转：把如下代码加入&head&区域中&meta http-equiv=&refresh& content=&20;url=&&,其中20指隔20秒后跳转到页面。
页面自动关闭
5000是指时间&body onLoad=&setTimeout(window.close, 5000)&&
弹出窗口自动关闭
10秒后弹出窗口自动关闭
注意：在新的tan.htm的body中要加 &onLoad=&closeit()&&
&script language=&JavaScript&&
var gt = unescape('%3e');
var popup =
var over = &Launch Pop-up Navigator&;
popup = window.open('', 'popupnav', 'width=225,height=235,resizable=1,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener =
popup.location.href = 'tan.htm';
&body&注意：这段代码是在新建文件中的
&script language=&JavaScript&&
&function closeit()
&&/script&
这个可不是&iframe&(引用）呀。是直接调用的。以下代码加入&body&区域
&object type=&text/x-scriptlet& width=&800&& height=&1000& data=&../index.htm&&
7.JavaScript经典效果集锦
申请加精，只有这样本帖子才不会沉下去，感觉这个帖子对大家很有用的!
一 实用且必用的小脚本代码:
脚本1：进入主页以后自动播放声音
&embed src=&pnm://10.13.31.90/~kayvin/mihunji.rm& hidden=true autostart=true loop=true&
脚本2：进入主页后自动最大话,省的去在自己单击了
self.moveTo(0,0)&
self.resizeTo(screen.availWidth,screen.availHeight)&
脚本3：显示现在时间的脚本
&script language=vbscript&document.write now&/script&
脚本4：显示最后修改时间的脚本
&script&document.write(document.lastModified)&/script&
脚本5：设为首页,加为收藏，加入频道,启动outlook发信
&a style=&cursor:hand&
onclick=&this.style.behavior=&url(#default#homepage)&;&
this.setHomePage(http://10.13.31.90/~kayvin/);&&&&设为首页&/a&&
&a style=&cursor:hand&&
onclick=&window.external.AddFavorite(location.href,document.title);&&加入收藏&/a&&
&a href=javascript:window.external.addChannel(&typhoon.cdf&)&加入频道&/a&&
&a href=&mailto:&&与我联系&/a&
脚本6：状态栏动态显示现在时间
function see(){&
window.setTimeout(&see()&,1000);&
today = new Date();&
self.status = today.toString();&
&/script&&
&body onload=see()&
脚本7：关闭窗口的脚本
&a href=javascript:close()&[关闭窗口]&/a&
脚本8：按下F12键,直接返回首页
&script&function look(){&
if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}&
if(document.onkeydown==null)&
{document.onkeydown=look}&
脚本9：后退,刷新,前进
&input type=button value=后退 onclick=history.go(-1)&&
&input type=button value=刷新 onclick=history.go(-0)&&
&input type=button value=前进 onclick=history.go(+1)&
脚本10：设定时间弹出窗口,4000=4秒,当然你可以自定义
&script&function l()&
window.open(& 10.13.31.90/~kayvin/ &,&name&,&width=500,height=150,border=0&)&
setTimeout(&l()&,4000)&
二 鼠标旁边的提示信息,类似与163登录后的页面提示效果：
&a href=&#& title=&这是提示&&tip&/a&&
&script Language=&JavaScript&&&
//***********默认设置定义.*********************&
tPopWait=50;//停留tWait豪秒后显示提示。&
tPopShow=5000;//显示tShow豪秒后关闭提示&
showPopStep=20;&
popOpacity=99;&
//***************内部变量定义*****************&
tFadeOut=&
tFadeWaiting=&
document.write(&&style type='text/css'id='defaultPopStyle'&&);&
document.write(&.cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000font-color: font-size: 12 padding-right: 4 padding-left: 4 height: 20 padding-top: 2 padding-bottom: 2 filter: Alpha(Opacity=0)}&);&
document.write(&&/style&&);&
document.write(&&div id='dypopLayer' style='position:z-index:1000;' class='cPopText'&&/div&&);&
function showPopupText(){&
var o=event.srcE&
MouseX=event.x;&
MouseY=event.y;&
if(o.alt!=null && o.alt!=&&){o.dypop=o.o.alt=&&};&
if(o.title!=null && o.title!=&&){o.dypop=o.o.title=&&};&
if(o.dypop!=sPop) {&
clearTimeout(curShow);&
clearTimeout(tFadeOut);&
clearTimeout(tFadeIn);&
clearTimeout(tFadeWaiting);&
if(sPop==null || sPop==&&) {&
dypopLayer.innerHTML=&&;&
dypopLayer.style.filter=&Alpha()&;&
dypopLayer.filters.Alpha.opacity=0;&
if(o.dyclass!=null) popStyle=o.dyclass&
else popStyle=&cPopText&;&
curShow=setTimeout(&showIt()&,tPopWait);&
function showIt(){&
dypopLayer.className=popS&
dypopLayer.innerHTML=sP&
popWidth=dypopLayer.clientW&
popHeight=dypopLayer.clientH&
if(MouseX+12+popWidth&document.body.clientWidth) popLeftAdjust=-popWidth-24&
else popLeftAdjust=0;&
if(MouseY+12+popHeight&document.body.clientHeight) popTopAdjust=-popHeight-24&
else popTopAdjust=0;&
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftA&
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopA&
dypopLayer.style.filter=&Alpha(Opacity=0)&;&
fadeOut();&
function fadeOut(){&
if(dypopLayer.filters.Alpha.opacity&popOpacity) {&
dypopLayer.filters.Alpha.opacity+=showPopS&
tFadeOut=setTimeout(&fadeOut()&,1);&
dypopLayer.filters.Alpha.opacity=popO&
tFadeWaiting=setTimeout(&fadeIn()&,tPopShow);&
function fadeIn(){&
if(dypopLayer.filters.Alpha.opacity&0) {&
dypopLayer.filters.Alpha.opacity-=1;&
tFadeIn=setTimeout(&fadeIn()&,1);&
document.onmouseover=showPopupT&
三 如果文字过长,则将过长的部分变成省略号显示：
&DIV STYLE=&width: 120 height: 50 border: 1&
& && && && &overflow: text-overflow:ellipsis&&&
&NOBR&就是比如有一行文字，很长，表格内一行显示不下.&/NOBR&&
四 滚动的图片
&script language=&javascript&&
imgArr=new Array()
imgArr[0]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
imgArr[1]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
imgArr[2]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
imgArr[3]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
imgArr[4]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
var moveStep=4& && &&&//步长，单位：pixel
var moveRelax=100& & //移动时间间隔，单位：ms
ns4=(document.layers)?true:false
var displayImgAmount=4& & //视区窗口可显示个数
var divWidth=220& & //每块图片占位宽
var divHeight=145& & //每块图片占位高
var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false
var startDivClipLeft
var nextDivClipRight
function initDivPlace(){
& & if (ns4){
& && &&&for (i=0;i&displayImgAi++){
& && && && &eval(&document.divOuter.document.divAds&+i+&.left=&+divWidth*i)
& && &&&for (i=displayImgAi&imgArr.i++){
& && && && &eval(&document.divOuter.document.divAds&+i+&.left=&+divWidth*displayImgAmount)
& & }else{
& && &&&for (i=0;i&displayImgAi++){
& && && && &eval(&document.all.divAds&+i+&.style.left=&+divWidth*i)
& && &&&for (i=displayImgAi&imgArr.i++){
& && && && &eval(&document.all.divAds&+i+&.style.left=&+divWidth*displayImgAmount)
function mvStart(){
& & timeID=setTimeout(moveLeftDiv,moveRelax)
function mvStop(){
& & clearTimeout(timeID)
function moveLeftDiv(){
& & if (ns4){
& && &&&for (i=0;i&=displayImgAi++){
& && && && &eval(&document.divOuter.document.divAds&+parseInt((startDnum+i)%imgArr.length)+&.left=document.divOuter.document.divAds&+parseInt((startDnum+i)%imgArr.length)+&.left-moveStep&)
& && &&&startDivClipLeft=parseInt(eval(&document.divOuter.document.divAds&+startDnum+&.clip.left&))
& && &&&nextDivClipRight=parseInt(eval(&document.divOuter.document.divAds&+nextDnum+&.clip.right&))
& && &&&if (startDivClipLeft+moveStep&divWidth){
& && && && &eval(&document.divOuter.document.divAds&+nextDnum+&.clip.right=&+divWidth)
& && && && &
& && && && &eval(&document.divOuter.document.divAds&+startDnum+&.left=&+divWidth*displayImgAmount)
& && && && &eval(&document.divOuter.document.divAds&+parseInt((nextDnum+1)%imgArr.length)+&.left=document.divOuter.document.divAds&+nextDnum+&.left+&+divWidth)
& && && && &eval(&document.divOuter.document.divAds&+parseInt((nextDnum+1)%imgArr.length)+&.clip.left=0&)
& && && && &
& && && && &
& && && && &startDnum=(++startDnum)%imgArr.length
& && && && &nextDnum=(startDnum+displayImgAmount)%imgArr.length
& && && && &
& && && && &startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
& && && && &nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
& && &&&}else{
& && && && &eval(&document.divOuter.document.divAds&+nextDnum+&.clip.left=0&)
& && && && &startDivClipLeft+=moveStep
& && && && &nextDivClipRight+=moveStep
& && &&&eval(&document.divOuter.document.divAds&+startDnum+&.clip.left=&+startDivClipLeft)
& && &&&eval(&document.divOuter.document.divAds&+nextDnum+&.clip.right=&+nextDivClipRight)
& & }else{
& && &&&for (i=0;i&=displayImgAi++){
& && && && &eval(&document.all.divAds&+parseInt((startDnum+i)%imgArr.length)+&.style.left=document.all.divAds&+parseInt((startDnum+i)%imgArr.length)+&.style.pixelLeft-moveStep&)
& && &&&startDivClipLeft=parseInt(eval(&document.all.divAds&+startDnum+&.currentStyle.clipLeft&))
& && &&&nextDivClipRight=parseInt(eval(&document.all.divAds&+nextDnum+&.currentStyle.clipRight&))
& && &&&if (startDivClipLeft+moveStep&divWidth){
& && && && &eval(&document.all.divAds&+nextDnum+&.style.clip='rect(0,&+divWidth+&,&+divHeight+&,0&+&)'&)
& && && && &
& && && && &eval(&document.all.divAds&+startDnum+&.style.left=&+divWidth*displayImgAmount)
& && && && &eval(&document.all.divAds&+parseInt((nextDnum+1)%imgArr.length)+&.style.left=document.all.divAds&+nextDnum+&.style.pixelLeft+&+divWidth)
& && && && &
& && && && &startDnum=(++startDnum)%imgArr.length
& && && && &nextDnum=(startDnum+displayImgAmount)%imgArr.length
& && && && &
& && && && &startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
& && && && &nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
& && &&&}else{
& && && && &startDivClipLeft+=moveStep
& && && && &nextDivClipRight+=moveStep
& && &&&eval(&document.all.divAds&+startDnum+&.style.clip='rect(0,&+divWidth+&,&+divHeight+&,&+startDivClipLeft+&)'&)
& && &&&eval(&document.all.divAds&+nextDnum+&.style.clip='rect(0,&+nextDivClipRight+&,&+divHeight+&,0)'&)
& & if (outHover){
& && &&&mvStop()
& & }else{
& && &&&mvStart()
function writeDivs(){
& & if (ns4){
& && &&&document.write(&&ilayer name=divOuter width=750 height=&+divHeight+&&&)
& && &&&for (i=0;i&imgArr.i++){
& && && && &document.write(&&layer name=divAds&+i+&&&)
& && && && &document.write(imgArr[i]+& &)
& && && && &document.write(&&/layer&&)
& && &&&document.write(&&/ilayer&&)
& && &&&document.close()
& && &&&for (i=displayImgAi&imgArr.i++){
& && && && &eval(&document.divOuter.document.divAds&+i+&.clip.right=0&)
& & }else{
& && &&&document.write(&&div id=divOuter style='position:relative' width=750 height=&+divHeight+&&&)
& && &&&for (i=0;i&imgArr.i++){
& && && && &document.write(&&div id=divAds&+i+& style='position:clip:rect(0,&+divWidth+&,&+divHeight+&,0)'&&)
& && && && &document.write(imgArr[i]+& &)
& && && && &document.write(&&/div&&)
& && &&&document.write(&&/div&&)
& && &&&for (i=displayImgAi&imgArr.i++){
& && && && &eval(&document.all.divAds&+i+&.style.clip='rect(0,0,&+divHeight+&,0)'&)
&BODY onload=javascript:mvStart()&
&SCRIPT language=javascript&writeDivs();initDivPlace();&/SCRIPT&
五 接收键盘指令的脚本:
&SCRIPT language=&JavaScript&&
var hotkey=97
var destination=&http://www.wyev.com&
if (document.layers)
document.captureEvents(Event.KEYPRESS)
function backhome(e){
if (document.layers){
if (e.which==hotkey)
window.location=destination
else if (document.all){
if (event.keyCode==hotkey)
window.location=destination
document.onkeypress=backhome
onkeydown=&javascript:onenter();&
function onenter(){
if(event.keyCode==13){
alert(&回车&);
六 让你的文本链接渐隐渐显:
&META NAME=&Description& CONTENT=&&&
&script language=&javascript& type=&text/javascript&&
startColor = 򣿔&; // 定义链接颜色
endColor = &#D8D1C5&;&&// 定义要渐变到最后的颜色
stepIn = 17;&
stepOut = 23;&
定义是否让所有的文本链接自动渐变，true为是，false为否
autoFade =&&
在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式
sloppyClass =&
hexa = new makearray(16);
for(var i = 0; i & 10; i++)
& & hexa[i] =
hexa[10]=&a&; hexa[11]=&b&; hexa[12]=&c&;
hexa[13]=&d&; hexa[14]=&e&; hexa[15]=&f&;
document.onmouseover =
document.onmouseout =
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i&7; i++){
&&for (j=0; j&16; j++){
& &if (Color.charAt(i) == hexa[j]){
& & if (i%2 !=0)
& &&&colorArr[Math.floor((i-1)/2)]=eval(j)*16;
& &&&colorArr[Math.floor((i-1)/2)]+=eval(j);
return colorA
function domouseover() {
&&if(document.all){
& &var srcElement = event.srcE
& &if ((srcElement.tagName == &A& && autoFade) || srcElement.className == &fade& || (sloppyClass && srcElement.className.indexOf(&fade&) != -1))
& && &&&fade(startColor,endColor,srcElement.uniqueID,stepIn);& && &
function domouseout() {
&&if (document.all){
& &var srcElement = event.srcE
& & if ((srcElement.tagName == &A& && autoFade) || srcElement.className == &fade& || (sloppyClass && srcElement.className.indexOf(&fade&) != -1))
& && &&&fade(endColor,startColor,srcElement.uniqueID,stepOut);
function makearray(n) {
& & this.length =
& & for(var i = 1; i &= i++)
& && &&&this[i] = 0;
function hex(i) {
& & if (i & 0)
& && &&&return &00&;
& & else if (i & 255)
& && &&&return &ff&;
& && & return && + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
& && &var hr = hex(r); var hg = hex(g); var hb = hex(b);
& && &element.style.color = &#&+hr+hg+
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
&&setColor(sr,sg,sb,eval(fadeId[0]));
&&var i = 1;
&&while(i & fadeId.length){
& &clearTimeout(fadeId[i]);
& &i++;
& & for(var i = 0; i &= i++) {
& &&&fadeId[i+1] = setTimeout(&setColor(Math.floor(& +sr+ & *(( & +step+ & - & +i+ & )/ & +step+ & ) + & +er+ & * (& +i+ &/& +
& &step+ &)),Math.floor(& +sg+ & * (( & +step+ & - & +i+ & )/ & +step+ & ) + & +eg+ & * (& +i+ &/& +step+
& &&)),Math.floor(& +sb+ & * ((& +step+ &-& +i+ &)/& +step+ &) + & +eb+ & * (& +i+ &/& +step+ &)),&+element+&);&,i*step);
fadeId[0] =
&A HREF=&&&让你的文本链接渐隐渐显&/A&
七 类似与QQ的好友/黑名单之类的树型菜单_极品:
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&TITLE& New Document &/TITLE&
&META NAME=&Generator& CONTENT=&EditPlus&&
&META NAME=&Author& CONTENT=&&&
&META NAME=&Keywords& CONTENT=&&&
&META NAME=&Description& CONTENT=&&&
if (!document.getElementById)
& & document.getElementById = function() { }
function initializeMenu(menuId, actuatorId) {
& & var menu = document.getElementById(menuId);
& & var actuator = document.getElementById(actuatorId);
& & if (menu == null || actuator == null)
& & //if (window.opera) // I'm too tired
& & actuator.parentNode.style.backgroundImage = &url(/images/plus.gif)&;
& & actuator.onclick = function() {
& && &&&var display = menu.style.
& && &&&this.parentNode.style.backgroundImage =
& && && && &(display == &block&) ? &url(/images/plus.gif)& : &url(/images/minus.gif)&;
& && &&&menu.style.display = (display == &block&) ? &none& : &block&;
window.onload = function() {
& && && && &initializeMenu(&productsMenu&, &productsActuator&);
& && && && &initializeMenu(&newPhonesMenu&, &newPhonesActuator&);
& && && && &initializeMenu(&compareMenu&, &compareActuator&);
&&font-family: verdana, helvetica, arial, sans-
#mainMenu {
&&background-color: #EEE;
&&border: 1px solid #CCC;
&&color: #000;
&&width: 203
#menuList {
&&margin: 0
&&padding: 10px 0px 10px 15
li.menubar {
&&background: url(/images/plus.gif) no-repeat 0em 0.3
&&font-size: 12
&&line-height: 1.5
&&list-style:
.menu, .submenu {
&&display:
&&margin-left: 15
&&padding: 0
.menu li, .submenu li {
&&background: url(/images/square.gif) no-repeat 0em 0.3
&&list-style:
a.actuator {
&&background-color:
&&color: #000;
&&font-size: 12
&&padding-left: 15
&&text-decoration:
a.actuator:hover {
&&text-decoration:
.menu li a, .submenu li a {
&&background-color:
&&color: #000;
&&font-size: 12
&&padding-left: 15
&&text-decoration:
.menu li a:hover, submenu li a:hover {
&&/*border-bottom: 1px dashed #000;*/
&&text-decoration:
span.key {
&&text-decoration:
&div id=&mainMenu&&
& && &&ul id=&menuList&&
& && &&&&li class=&menubar&&
& && && & &a href=&#& id=&productsActuator& class=&actuator&&图秀地带收藏夹&/a&
& && && & &ul id=&productsMenu& class=&menu&&
& && && && &&li&
& && && && &&&&a href=&#& id=&newPhonesActuator& class=&actuator&&我的好友&/a&
& && && && &&&&ul id=&newPhonesMenu& class=&submenu&&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&张三[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&李四[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&张三[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&李四[]&/a&&/li&
& && && && &&&&/ul&
& && && && &&/li&
& && && && &&li&
& && && && &&&&a href=&#& id=&compareActuator& class=&actuator&&陌生人&/a&
& && && && &&&&ul id=&compareMenu& class=&submenu&&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&张三[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&李四[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&张三[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&李四[]&/a&&/li&
& && && && &&&&/ul&
& && && && &&/li&
& && && & &/ul&
& && &&&&/li&
& && &&/ul&
& & &/div&
八 很多的脚本翻页:
&!doctype html public &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title& JavaScript: showPages v1.0 [by Lapuasi.com]&/title&
&script language=&JavaScript&&
showPages v1.1
=================================
Infomation
----------------------
Author : Lapuasi
Web : http://www.lapuasi.com
----------------------
var pg = new showPages('pg');
pg.pageCount = 12; //定义总页数(必要)
pg.argName = 'p';& & //定义参数名(可选,缺省为page)
pg.printHtml();& && &&&//显示页数
Supported in Internet Explorer, Mozilla Firefox
function showPages(name) { //初始化属性
& & & & this.name =& && &//对象名称
& & & & this.page = 1;& && && &//当前页数
& & & & this.pageCount = 1;& & //总页数
& & & & this.argName = 'page'; //参数名
& & & & this.showTimes = 1;& & //打印次数
showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
& & & & var args = location.
& & & & var reg = new RegExp('[/?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
& & & & var chk = args.match(reg);
& & & & this.page = RegExp.$1;
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
& & & & if (isNaN(parseInt(this.page))) this.page = 1;
& & & & if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
& & & & if (this.page & 1) this.page = 1;
& & & & if (this.pageCount & 1) this.pageCount = 1;
& & & & if (this.page & this.pageCount) this.page = this.pageC
& & & & this.page = parseInt(this.page);
& & & & this.pageCount = parseInt(this.pageCount);
showPages.prototype.createHtml = function(mode){ //生成html代码
& & & & var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
& & & & if (mode == '' || typeof(mode) == 'undefined') mode = 0;
& & & & switch (mode) {
& & & & & & & & case 0 : //模式1 (页数,首页,前页,后页,尾页)
& & & & & & & & & & & & strHtml += '&span class=&count&&Pages: ' + this.page + ' / ' + this.pageCount + '&/span&';
& & & & & & & & & & & & strHtml += '&span class=&number&&';
& & & & & & & & & & & & if (prevPage & 1) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&<&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&a href=&javascript:' + this.name + '.toPage(1);&&&&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&&a href=&javascript:' + this.name + '.toPage(' + prevPage + ');&&<&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & for (var i = 1; i &= this.pageC i++) {
& & & & & & & & & & & & & & & & if (i & 0) {
& & & & & & & & & & & & & & & & & & & & if (i == this.page) {
& & & & & & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&[' + i + ']&/span&';
& & & & & & & & & & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&&a href=&javascript:' + this.name + '.toPage(' + i + ');&&[' + i + ']&/a&&/span&';
& & & & & & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & if (nextPage & this.pageCount) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&>&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&&a href=&javascript:' + this.name + '.toPage(' + nextPage + ');&&>&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&&&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&&br /&';
& & & & & & & & & & & &
& & & & & & & & case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
& & & & & & & & & & & & strHtml += '&span class=&count&&Pages: ' + this.page + ' / ' + this.pageCount + '&/span&';
& & & & & & & & & & & & strHtml += '&span class=&number&&';
& & & & & & & & & & & & if (prevPage & 1) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&<&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&a href=&javascript:' + this.name + '.toPage(1);&&&&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&&a href=&javascript:' + this.name + '.toPage(' + prevPage + ');&&<&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & if (this.page % 10 ==0) {
& & & & & & & & & & & & & & & & var startPage = this.page - 9;
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & var startPage = this.page - this.page % 10 + 1;
& & & & & & & & & & & & }
& & & & & & & & & & & & if (startPage & 10) strHtml += '&span title=&Prev 10 Pages&&&a href=&javascript:' + this.name + '.toPage(' + (startPage - 1) + ');&&...&/a&&/span&';
& & & & & & & & & & & & for (var i = startP i & startPage + 10; i++) {
& & & & & & & & & & & & & & & & if (i & this.pageCount)
& & & & & & & & & & & & & & & & if (i == this.page) {
& & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&[' + i + ']&/span&';
& & & & & & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&&a href=&javascript:' + this.name + '.toPage(' + i + ');&&[' + i + ']&/a&&/span&';
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & if (this.pageCount &= startPage + 10) strHtml += '&span title=&Next 10 Pages&&&a href=&javascript:' + this.name + '.toPage(' + (startPage + 10) + ');&&...&/a&&/span&';
& & & & & & & & & & & & if (nextPage & this.pageCount) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&>&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&&a href=&javascript:' + this.name + '.toPage(' + nextPage + ');&&>&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&&&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&&br /&';
& & & & & & & & & & & &
& & & & & & & & case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
& & & & & & & & & & & & strHtml += '&span class=&count&&Pages: ' + this.page + ' / ' + this.pageCount + '&/span&';
& & & & & & & & & & & & strHtml += '&span class=&number&&';
& & & & & & & & & & & & if (prevPage & 1) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&<&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&a href=&javascript:' + this.name + '.toPage(1);&&&&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&&a href=&javascript:' + this.name + '.toPage(' + prevPage + ');&&<&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & if (this.page != 1) strHtml += '&span title=&Page 1&&&a href=&javascript:' + this.name + '.toPage(1);&&[1]&/a&&/span&';
& & & & & & & & & & & & if (this.page &= 5) strHtml += '&span&...&/span&';
& & & & & & & & & & & & if (this.pageCount & this.page + 2) {
& & & & & & & & & & & & & & & & var endPage = this.page + 2;
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & var endPage = this.pageC
& & & & & & & & & & & & }
& & & & & & & & & & & & for (var i = this.page - 2; i &= endP i++) {
& & & & & & & & & & & & & & & & if (i & 0) {
& & & & & & & & & & & & & & & & & & & & if (i == this.page) {
& & & & & & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&[' + i + ']&/span&';
& & & & & & & & & & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & & & & & & & & & if (i != 1 && i != this.pageCount) {
& & & & & & & & & & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&&a href=&javascript:' + this.name + '.toPage(' + i + ');&&[' + i + ']&/a&&/span&';
& & & & & & & & & & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & if (this.page + 3 & this.pageCount) strHtml += '&span&...&/span&';
& & & & & & & & & & & & if (this.page != this.pageCount) strHtml += '&span title=&Page ' + this.pageCount + '&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&[' + this.pageCount + ']&/a&&/span&';
& & & & & & & & & & & & if (nextPage & this.pageCount) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&>&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&&a href=&javascript:' + this.name + '.toPage(' + nextPage + ');&&>&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&&&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&&br /&';
& & & & & & & & & & & &
& & & & & & & & case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
& & & & & & & & & & & & strHtml += '&span class=&count&&Pages: ' + this.page + ' / ' + this.pageCount + '&/span&';
& & & & & & & & & & & & strHtml += '&span class=&arrow&&';
& & & & & & & & & & & & if (prevPage & 1) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&9&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&7&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&a href=&javascript:' + this.name + '.toPage(1);&&9&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&&a href=&javascript:' + this.name + '.toPage(' + prevPage + ');&&7&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & if (nextPage & this.pageCount) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&8&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&:&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&&a href=&javascript:' + this.name + '.toPage(' + nextPage + ');&&8&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&:&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&&br /&';
& & & & & & & & & & & &
& & & & & & & & case 4 : //模式4 (下拉框)
& & & & & & & & & & & & if (this.pageCount & 1) {
& & & & & & & & & & & & & & & & strHtml += '&select name=&toPage& disabled&';
& & & & & & & & & & & & & & & & strHtml += '&option value=&0&&No Pages&/option&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & var chkS
& & & & & & & & & & & & & & & & strHtml += '&select name=&toPage& onchange=&' + this.name + '.toPage(this);&&';
& & & & & & & & & & & & & & & & for (var i = 1; i &= this.pageC i++) {
& & & & & & & & & & & & & & & & & & & & if (this.page == i) chkSelect=' selected=&selected&';
& & & & & & & & & & & & & & & & & & & & else chkSelect='';
& & & & & & & & & & & & & & & & & & & & strHtml += '&option value=&' + i + '&' + chkSelect + '&Pages: ' + i + ' / ' + this.pageCount + '&/option&';
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/select&';
& & & & & & & & & & & &
& & & & & & & & case 5 : //模式5 (输入框)
& & & & & & & & & & & & strHtml += '&span class=&input&&';
& & & & & & & & & & & & if (this.pageCount & 1) {
& & & & & & & & & & & & & & & & strHtml += '&input type=&text& name=&toPage& value=&No Pages& class=&itext& disabled=&disabled&&';
& & & & & & & & & & & & & & & & strHtml += '&input type=&button& name=&go& value=&GO& class=&ibutton& disabled=&disabled&&&/option&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&input type=&text& value=&Input Page:& class=&ititle& readonly=&readonly&&';
& & & & & & & & & & & & & & & & strHtml += '&input type=&text& id=&pageInput' + this.showTimes + '& value=&' + this.page + '& class=&itext& title=&Input page& onkeypress=&return ' + this.name + '.formatInputPage(event);& onfocus=&this.select()&&';
& & & & & & & & & & & & & & & & strHtml += '&input type=&text& value=& / ' + this.pageCount + '& class=&icount& readonly=&readonly&&';
& & & & & & & & & & & & & & & & strHtml += '&input type=&button& name=&go& value=&GO& class=&ibutton& onclick=&' + this.name + '.toPage(document.getElementById(/'pageInput' + this.showTimes + '/').value);&&&/option&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&';
& & & & & & & & & & & &
& & & & & & & & default :
& & & & & & & & & & & & strHtml = 'Javascript showPage Error: not find mode ' +
& & & & & & & & & & & &
& & & & return strH
showPages.prototype.createUrl = function (page) { //生成页面跳转url
& & & & if (isNaN(parseInt(page))) page = 1;
& & & & if (page & 1) page = 1;
& & & & if (page & this.pageCount) page = this.pageC
& & & & var url = location.protocol + '//' + location.host + location.
& & & & var args = location.
& & & & var reg = new RegExp('([/?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
& & & & args = args.replace(reg,'$1');
& & & & if (args == '' || args == null) {
& & & & & & & & args += '?' + this.argName + '=' +
& & & & } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
& & & & & & & & & & & & args += this.argName + '=' +
& & & & } else {
& & & & & & & & & & & & args += '&' + this.argName + '=' +
& & & & return url +
showPages.prototype.toPage = function(page){ //页面跳转
& & & & var turnTo = 1;
& & & & if (typeof(page) == 'object') {
& & & & & & & & turnTo = page.options[page.selectedIndex].
& & & & } else {
& & & & & & & & turnTo =
& & & }
createElement
getElementById
getElementsByName
getElementsByTagName
getAttribute
setAttribute
addEventListener
removeEventListener
stopPropagation
preventDefault
setInterval
clearInterval
setTimeout
clearTimeout
setCapture
getBoundingClientRect
requestAnimationFrame
encodeURIComponent
decodeURIComponent
赞同 添加评论分享收藏感谢收起写回答这个功能是很久之前实现的，现在发上来，很长一段时间没更新博客了，真惭愧。这个JS代码还有很多修改的空间，先发上来，以后再发个更新的版本吧。
这是效果图：
【HTML代码】
&div&id=&menu&&
&&&&&ul&id=&nav&&
&&&&&&&&&li&&a&href=&#&&
class=&selected&&tab1&/a&&/li&
&&&&&&&&&li&&a&href=&#&&
class=&&&tab2&/a&&/li&
&&&&&&&&&li&&a&href=&#&&
class=&&&tab3&/a&&/li&
&&&&&&&&&div&style=&clear:both&&&/div&
&&&&&div&id=&menu_con&&
&&&&&&&&&div&class=&tag&
style=&display:block&&
&&&&&&&&&&&&这是TAB切换效果区域1
&&&&&&&&&&/div&
&&&&&&&&&div&class=&tag&
style=&display:none&&
&&&&&&&&&&&&这是TAB切换效果区域2&&&
&&&&&&&&&&/div&
&&&&&&&&&div&class=&tag&&
style=&display:none&&
&&&&&&&&&&&&这是TAB切换效果区域3
&&&&&&&&&/div&
var&tabs=function(){
&&&&function&tag(name,elem){
&&&&&&&&return&(elem||document).getElementsByTagName(name);
&&&&function&id(name){
&&&&&&&&return&document.getElementById(name);
&&&&function&first(elem){
&&&&&&&&elem=elem.firstC
&&&&&&&&return&elem&&elem.nodeType==1?
elem:next(elem);
&&&&function&next(elem){
&&&&&&&&do{
&&&&&&&&&&&&elem=elem.nextS&
&&&&&&&&}while(
&&&&&&&&&&&&elem&&elem.nodeType!=1&
&&&&&&&&return&
&&&&return&{
&&&&&&&&set:function(elemId,tabId){
&&&&&&&&&&&&var&elem=tag(&li&,id(elemId));
&&&&&&&&&&&&var&tabs=tag(&div&,id(tabId));
&&&&&&&&&&&&var&listNum=elem.
&&&&&&&&&&&&var&tabNum=tabs.
&&&&&&&&&&&&for(var&i=0;i&listNi++){
&&&&&&&&&&&&&&&&&&&&elem[i].onclick=(function(i){
&&&&&&&&&&&&&&&&&&&&&&&&return&function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&for(var&j=0;j&tabNj++){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&if(i==j){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&tabs[j].style.display=&block&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&elem[j].firstChild.className=&selected&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&else{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&tabs[j].style.display=&none&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&elem[j].firstChild.className=&&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&})(i)
&&&&&&&&&&&&}
window.onload=function(){
&&&&tabs.set(&nav&,&menu_con&);
background:#FFF;}
a{color:#585858}
#menu{width:360}
#nav {display:width:100%;padding:0;margin:0;list-style:
&background:url(../images/bg.gif)}
#nav li {float:width:120}
#nav li a {display:line-height:27text-decoration:padding:0 0 0 5 text-align:center}
#menu_con{
width:358 height:135border:1px solid #BF9660; border-top:none}
.selected{background:url(../images/tag_bg.gif);}
clear:both}
调用方法：
tabs.set(&nav&,&menu_con&);
代码下载 点击
只实现了点击切换的效果
[javascript]&&
/全选取消按钮函数&&
function&checkAll(chkobj)&{&&
&&&&if&($(chkobj).text()&==&&全选&)&{&&
&&&&&&&&$(chkobj).children(&span&).text(&取消&);&&
&&&&&&&&$(&.checkall&input:enabled&).prop(&checked&,&true);&&
&&&&}&else&{&&
&&&&&&&&$(chkobj).children(&span&).text(&全选&);&&
&&&&&&&&$(&.checkall&input:enabled&).prop(&checked&,&false);&&
function&checkNumber(e)&{&&
&&&&var&keynum&=&window.event&?&e.keyCode&:&e.&&
&&&&if&((48&&=&keynum&&&&keynum&&=&57)&||&keynum&==&8)&{&&
&&&&&&&&return&true;&&
&&&&}&else&{&&
&&&&&&&&return&false;&&
function&checkForFloat(obj,&e)&{&&
&&&&var&isOK&=&false;&&
&&&&var&key&=&window.event&?&e.keyCode&:&e.&&
&&&&if&((key&&&95&&&&key&&&106)&||&&&
&&&&&&&&(key&&&47&&&&key&&&60)&||&&&&
&&&&&&&&(key&==&110&&&&obj.value.indexOf(&.&)&&&0)&||&&&
&&&&&&&&(key&==&190&&&&obj.value.indexOf(&.&)&&&0)&||&&&
&&&&&&&&&key&==&8&||&key&==&9&||&key&==&46&||&key&==&37&||&key&==&39)&{&&
&&&&&&&&isOK&=&true;&&
&&&&}&else&{&&
&&&&&&&&if&(window.event)&{&&&
&&&&&&&&&&&&e.returnValue&=&false;&&&&&
&&&&&&&&}&else&{&&&
&&&&&&&&&&&&e.preventDefault();&&
&&&&&&&&}&&
&&&&return&isOK;&&&&
function&checktxt(obj,&txtId)&{&&
&&&&var&txtCount&=&$(obj).val().&&
&&&&if&(txtCount&&&1)&{&&
&&&&&&&&return&false;&&
&&&&var&smsLength&=&Math.ceil(txtCount&/&62);&&
&&&&$(&#&&+&txtId).html(&您已输入&b&&&+&txtCount&+&&&/b&个字符，将以&b&&&+&smsLength&+&&&/b&条短信扣取费用。&);&&
function&ForDight(Dight,&How)&{&&
&&&&Dight&=&Math.round(Dight&*&Math.pow(10,&How))&/&Math.pow(10,&How);&&
&&&&return&D&&
function&addCookie(objName,&objValue,&objHours)&{&&
&&&&var&str&=&objName&+&&=&&+&escape(objValue);&&
&&&&if&(objHours&&&0)&{&&
&&&&&&&&var&date&=&new&Date();&&
&&&&&&&&var&ms&=&objHours&*&3600&*&1000;&&
&&&&&&&&date.setTime(date.getTime()&+&ms);&&
&&&&&&&&str&+=&&;&expires=&&+&date.toGMTString();&&
&&&&document.cookie&=&&&
function&getCookie(objName)&{&&
&&&&var&arrStr&=&document.cookie.split(&;&&);&&
&&&&for&(var&i&=&0;&i&&&arrStr.&i++)&{&&
&&&&&&&&var&temp&=&arrStr[i].split(&=&);&&
&&&&&&&&if&(temp[0]&==&objName)&return&unescape(temp[1]);&&
&&&&return&&&;&&
function&jsprint(msgtitle,&url,&callback)&{&&
&&&&var&d&=&dialog({&content:&msgtitle&}).show();&&
&&&&setTimeout(function&()&{&&
&&&&&&&&d.close().remove();&&
&&&&},&2000);&&
&&&&if&(url&==&&back&)&{&&
&&&&&&&&frames[&mainframe&].history.back(-1);&&
&&&&}&else&if&(url&!=&&&)&{&&
&&&&&&&&frames[&mainframe&].location.href&=&&&
&&&&if&(arguments.length&==&3)&{&&
&&&&&&&&callback();&&
function&jsdialog(msgtitle,&msgcontent,&url,&callback)&{&&
&&&&var&d&=&dialog({&&
&&&&&&&&title:&msgtitle,&&
&&&&&&&&content:&msgcontent,&&
&&&&&&&&okValue:&'确定',&&
&&&&&&&&ok:&function&()&{&},&&
&&&&&&&&onclose:&function&()&{&&
&&&&&&&&&&&&if&(url&==&&back&)&{&&
&&&&&&&&&&&&&&&&history.back(-1);&&
&&&&&&&&&&&&}&else&if&(url&!=&&&)&{&&
&&&&&&&&&&&&&&&&location.href&=&&&
&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&if&(argnum&==&5)&{&&
&&&&&&&&&&&&&&&&callback();&&
&&&&&&&&&&&&}&&
&&&&&&&&}&&
&&&&}).showModal();&&
function&ShowMaxDialog(tit,&url)&{&&
&&&&dialog({&&
&&&&&&&&title:&tit,&&
&&&&&&&&url:&url&&
&&&&}).showModal();&&
function&ExePostBack(objId,&objmsg)&{&&
&&&&if&($(&.checkall&input:checked&).size()&&&1)&{&&
&&&&&&&&parent.dialog({&&
&&&&&&&&&&&&title:&'提示',&&
&&&&&&&&&&&&content:&'对不起，请选中您要操作的记录！',&&
&&&&&&&&&&&&okValue:&'确定',&&
&&&&&&&&&&&&ok:&function&()&{&}&&
&&&&&&&&}).showModal();&&
&&&&&&&&return&false;&&
&&&&var&msg&=&&删除记录后不可恢复，您确定吗？&;&&
&&&&if&(arguments.length&==&2)&{&&
&&&&&&&&msg&=&&&
&&&&parent.dialog({&&
&&&&&&&&title:&'提示',&&
&&&&&&&&content:&msg,&&
&&&&&&&&okValue:&'确定',&&
&&&&&&&&ok:&function&()&{&&
&&&&&&&&&&&&__doPostBack(objId,&'');&&
&&&&&&&&},&&
&&&&&&&&cancelValue:&'取消',&&
&&&&&&&&cancel:&function&()&{&}&&
&&&&}).showModal();&&
&&&&return&false;&&
function&CheckPostBack(objId,&objmsg)&{&&
&&&&var&msg&=&&对不起，请选中您要操作的记录！&;&&
&&&&if&(arguments.length&==&2)&{&&
&&&&&&&&msg&=&&&
&&&&if&($(&.checkall&input:checked&).size()&&&1)&{&&
&&&&&&&&parent.dialog({&&
&&&&&&&&&&&&title:&'提示',&&
&&&&&&&&&&&&content:&msg,&&
&&&&&&&&&&&&okValue:&'确定',&&
&&&&&&&&&&&&ok:&function&()&{&}&&
&&&&&&&&}).showModal();&&
&&&&&&&&return&false;&&
&&&&__doPostBack(objId,&'');&&
&&&&return&false;&&
function&ExeNoCheckPostBack(objId,&objmsg)&{&&
&&&&var&msg&=&&删除记录后不可恢复，您确定吗？&;&&
&&&&if&(arguments.length&==&2)&{&&
&&&&&&&&msg&=&&&
&&&&parent.dialog({&&
&&&&&&&&title:&'提示',&&
&&&&&&&&content:&msg,&&
&&&&&&&&okValue:&'确定',&&
&&&&&&&&ok:&function&()&{&&
&&&&&&&&&&&&__doPostBack(objId,&'');&&
&&&&&&&&},&&
&&&&&&&&cancelValue:&'取消',&&
&&&&&&&&cancel:&function&()&{&}&&
&&&&}).showModal();&&
&&&&return&false;&&
前言：之前分享了那么多bootstrap组件的使用经验，这篇博主打算研究下JS组件的扩展和封装，我们来感受下JQuery为我们提供$.Extend的神奇，看看我们怎么自定义自己的组件，比如我们想扩展一个$(&#id&).MyJsControl({})做我们自己的组件，我们该如何去做呢，别急，我们慢慢来看看过程。
一、扩展已经存在的组件
1、需求背景
很多时候，我们使用jquery.ajax的方式向后台发送请求，型如
$.ajax({
type: &post&,
url: &/User/Edit&,
data: { data: JSON.stringify(postdata) },
success: function (data, status) {
if (status == &success&) {
toastr.success('提交数据成功');
$(&#tb_aaa&).bootstrapTable('refresh');
error: function (e) {
complete: function () {
这种代码太常见了，这个时候我们有这样一个需求：在自己调用ajax请求的时候，我们不想每次都写error:function(e){}这种代码，但是我们又想让它每次都将ajax的错误信息输出到浏览器让用户能够看到。怎么办呢？
2、实现原理
要想实现以上效果其实并不难，我们可以将$.ajax({})封装一层，在封装的公共方法里面定义error对应的事件即可。确实，这样能达到我们的要求，但是并不完美，原因很简单：1）在jquery的基础上面再封装一层，效率不够高；2）需要改变调用者的习惯，每次调用ajax的时候需要按照我们定义的方法的规则来写，而不能直接用原生的$.ajax({})这种写法，这是我们不太想看到。
既然如此，那我们如何做到既不封装控件，又能达到以上要求呢？答案就是通过我们的$.extend去扩展原生的jquery.ajax。
其实实现起来也并不难，通过以下一段代码就能达到我们的要求。
(function ($) {
//1.得到$.ajax的对象
var _ajax = $.
$.ajax = function (options) {
//2.每次调用发送ajax请求的时候定义默认的error处理方法
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
success: function (data, textStatus) { },
beforeSend: function (XHR) { },
complete: function (XHR, TS) { }
//3.如果在调用的时候写了error的处理方法，就不用默认的
if (options.error) {
fn.error = options.
if (options.success) {
fn.success = options.
if (options.beforeSend) {
fn.beforeSend = options.beforeS
if (options.complete) {
fn.complete = options.
//4.扩展原生的$.ajax方法，返回最新的参数
var _options = $.extend(options, {
error: function (XMLHttpRequest, textStatus, errorThrown) {
fn.error(XMLHttpRequest, textStatus, errorThrown);
success: function (data, textStatus) {
fn.success(data, textStatus);
beforeSend: function (XHR) {
fn.beforeSend(XHR);
complete: function (XHR, TS) {
fn.complete(XHR, TS);
//5.将最新的参数传回ajax对象
_ajax(_options);
})(jQuery);
如果没接触过jquery里面$.extend这个方法的童鞋可能看不懂以上是什么意思。好，我们首先来看看jquery API对$.extend()方法是作何解释的。
什么意思呢？我们来看官方的两个例子就知道了
var settings = { validate: false, limit: 5, name: &foo& };
var options = { validate: true, name: &bar& };
$.extend(settings, options);
settings == { validate: true, limit: 5, name: &bar& }
var empty = {};
var defaults = { validate: false, limit: 5, name: &foo& };
var options = { validate: true, name: &bar& };
var settings = $.extend(empty, defaults, options);
settings == { validate: true, limit: 5, name: &bar& }
empty == { validate: true, limit: 5, name: &bar& }
以上的两个简单例子就说明extend()方法作用就是合并另个对象，有相同的则覆盖，没有相同的则添加。就是这么简单。
了解了$.extend()的作用，我们就能大概看懂上面那个扩展jquery.ajax的实现了吧。主要的步骤分为：
1）定义默认的error处理方法。
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
success: function (data, textStatus) { },
beforeSend: function (XHR) { },
complete: function (XHR, TS) { }
2）判断用户在调用$.ajax({})的时候是否自定了error:function(){}，如果定义过，则使用用户定义的，反之则用默认的error处理方法。
3）使用$.extend()将error默认处理方法传入$.ajax()的参数中。我们看options参数时包含$.ajax()方法里面所有的参数的，然后用默认的fn去扩展它即可。
通过以上三步就能够实现对$.ajax()方法里面error默认处理方法。这样扩展，对于我们使用者来说完全感觉不到变化，我们仍然可以$.ajax({});这样去发送ajax请求，如果没有特殊情况，不用写error处理方法。
3、组件扩展的意义
使用组件扩展，能够帮助我们在原有组件上面增加一些和我们系统业务相关的处理需求，而在使用时，还是和使用原生组件一样去调用，免去了在组件上面再封装一层的臃肿。
二、扩展自己组件
上面通过$.extend()方法扩展了$.ajax()的error事件处理方法。下面我们来封装一个自己的组件试试，功能很简单，但比较有说明性。我们就以select这个组件为例，很多情况下，我们的select里面的option都是需要从数据库里面取数据的，所以一般的做法就是发送一个ajax请求，然后在success方法里面拼html。现在我们就封装一个select远程取数据的方法。
1、代码实现以及使用示例
先上干货吧，将写好的整出来：
(function ($) {
//1.定义jquery的扩展方法combobox
$.fn.combobox = function (options, param) {
if (typeof options == 'string') {
return $.fn.combobox.methods[options](this, param);
//2.将调用时候传过来的参数和default参数合并
options = $.extend({}, $.fn.combobox.defaults, options || {});
//3.添加默认值
var target = $(this);
target.attr('valuefield', options.valueField);
target.attr('textfield', options.textField);
target.empty();
var option = $('&option&&/option&');
option.attr('value', '');
option.text(options.placeholder);
target.append(option);
//4.判断用户传过来的参数列表里面是否包含数据data数据集，如果包含，不用发ajax从后台取，否则否送ajax从后台取数据
if (options.data) {
init(target, options.data);
//var param = {};
options.onBeforeLoad.call(target, options.param);
if (!options.url) return;
$.getJSON(options.url, options.param, function (data) {
init(target, data);
function init(target, data) {
$.each(data, function (i, item) {
var option = $('&option&&/option&');
option.attr('value', item[options.valueField]);
option.text(item[options.textField]);
target.append(option);
options.onLoadSuccess.call(target);
target.unbind(&change&);
target.on(&change&, function (e) {
if (options.onChange)
return options.onChange(target.val());
//5.如果传过来的是字符串，代表调用方法。
$.fn.combobox.methods = {
getValue: function (jq) {
return jq.val();
setValue: function (jq, param) {
jq.val(param);
load: function (jq, url) {
$.getJSON(url, function (data) {
jq.empty();
var option = $('&option&&/option&');
option.attr('value', '');
option.text('请选择');
jq.append(option);
$.each(data, function (i, item) {
var option = $('&option&&/option&');
option.attr('value', item[jq.attr('valuefield')]);
option.text(item[jq.attr('textfield')]);
jq.append(option);
//6.默认参数列表
$.fn.combobox.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '请选择',
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
})(jQuery);
先来看看我们自定义组件如何使用：
用法一：通过URL远程取数据并初始化
首先定义一个空的select&
&select id=&sel_search_plant& class=&form-control&&&/select&
然后初始化它
$(function(){
$('#sel_search_plant').combobox({
url: '/apiaction/Plant/Find',
valueField: 'TM_PLANT_ID',
textField: 'NAME_C'
参数很简单，就不一一介绍了。很简单有木有~~
用法二：取值和设置
var strSelectedValue = $('#sel_search_plant').combobox(&getValue&);
$('#sel_search_plant').combobox(&setValue&, &aaa&);
其实对于简单的select标签，博主觉得这里的getValu和SetValue意义不大，因为直接通过$('#sel_search_plant').val()就能解决的事，何必要再封一层。这里仅仅是做演示，试想，如果是封装成类似select2或者multiselect这种组件，getValue和setValue的意义就有了，你觉得呢？
2、代码详细讲解
上面的实现代码，如果您一眼就能看懂，证明您是经常封组件的大虾了，下面的就不用看了。如果看不懂，也没关系，我们将代码拆开详细看看里面是什么鬼。
（1）首先看看我们最常看到的如下写法：
(function ($) {
//....封装组件逻辑
})(jQuery);
初初看到这种用法，博主也是狂抓，这是什么鬼嘛，四不像啊。使用多了之后才知道原来这就是一个匿名函数的形式。将它拆开来看如下：
var fn = function($){
//.....组件封装逻辑
fn(jQuery);
也就是说这种写法就表示先定义一个方法，然后立即调用这个方法，jQuery相当于实参。打开jquery.js的原文件可以看到，jQuery是这个文件里面的一个全局变量。
（2）定义自己的组件的代码：
$.fn.combobox = function (options, param) {
习惯这种写法的应该知道，这个就表示向jquery对象添加自定义方法，比如你想使用文章开始的&$(&#id&).MyJsControl({})&这种用法，你就可以这样定义&$.fn.MyJsControl=function(options){}&。
（3）&options = $.extend({}, $.fn.combobox.defaults,
options || {});&这一句，看过上文的朋友应该还记得extend这么一个方法吧，怎么样，又来了你。这句话其实就没什么好说的了，合并默认参数和用户传进来的参数。
（4）默认参数列表
$.fn.combobox.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '请选择',
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
如果用户没有传参，就用默认的参数列表。如果你够细心，你会发现博主之前分享的其他bootstrap组件的js文件里面都有这么一个default参数列表。我们随便找两个：
bootstrap上传组件
bootstrap table组件
基本都是这么些用法。这样来看，是否也可以自己封一个js组件~~
以上就是博主对js组件扩展以及封装用法的认识和总结。当然，都是些比较简单基础的封装，如果想要实现类似bootstrap table的组件，那还差得很远。不过万丈高楼平地起，只要打好基础，封一个自己的table组件也不是什么大问题。文中如果有理解不对的地方，欢迎指出，博主将不胜感激。如果本文能够对你有丝毫帮助，麻烦抬起你的小手点个推荐，博主一定继续努力，将更好的文章分享给大家。
document对象]
该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
alinkColor 活动链接的颜色(ALINK)
anchor 一个HTMI锚点,使用&A NAME=&标记创建(该属性本身也是一个对象)
anchors array 列出文档锚点对象的数组(&A NAME=&)(该属性本身也是一个对象)
bgColor 文档的背景颜色(BGCOLOR)
cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
fgColor 文档的文本颜色(&BODY&标记里的TEXT特性)
form 文档中的一个窗体(&FORM&)(该属性本身也是一个对象)
forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
lastModified 文档最后的修改日期
linkColor 文档的链接的颜色,即&BODY&标记中的LINK特性(链接到用户没有观察到的文档)
link 文档中的一个&A HREF=&标记(该属性本身也是一个对象)
links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
title 文档的标题((TITLE&)
vlinkColor 指向用户已观察过的文档的链接文本颜色,即&BODY&标记的VLINK特性
clear 清除指定文档的内容
close 关闭文档流
open 打开文档流
write 把文本写入文档
writeln 把文本写入文档,并以换行符结尾
[window对象]
它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。
defaultStatus 缺省的状态条消息
document 当前显示的文档(该属性本身也是一个对象)
frame 窗口里的一个框架((FRAME&)(该属性本身也是一个对象)
frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)
history 窗口的历史列表(该属性本身也是一个对象)
length 窗口内的框架数
location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location(因为这是当前显示文档的位置)
name 窗口打开时,赋予该窗口的名字
opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)
parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
self 当前窗口或框架的同义词
status 状态条中的消息
top 包含当前框架的最顶层浏览器窗口的同义词
window 当前窗口或框架的同义词,与self相同
alert() 打开一个Alert消息框
clearTimeout() 用来终止setTimeout方法的工作
close() 关闭窗口
confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false
blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)
focus() 把指定的窗口带到前台(另一个新方法)
open() 打开一个新窗口
prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序
事件处理程序
Onload() 页面载入时触发
Onunload() 页面关闭时触发
5.几种常见的JavaScript特效
①页面显示大广告图片及其自动关闭&
在打开一个页面时，常常会出现一个大广告图片显示网站的最新活动等，一般广告显示5秒左右，广告又会自己关闭，这个是怎么实现的？&
其实只需要将图片加在网页合适的位置，然后再写一个删去隐藏图片元素的函数，并设置n秒后执行：
function showAd(){
var Pic = document.getElementById('ad');
setTimeout(function() {
Pic.style.display = 'none';
window.onload=showAd;12345678
②输入完成后进行校验&
实际上只需要在input标签里面添加一个onblur属性，该属性绑定一个用于校验的函数即可：
type=&text& id=&name& onblur=&validateTel()&/&
function validateTel(){
alert(&do something&);
③勾选全部复选框&
在网站中，如果复选框较多，会有一个全选按钮，点击后，所有复选框会被选中：
charset=&utf-8& /&
你的爱好是：&
type=&checkbox& name=&hobby& value=&& /&篮球
type=&checkbox& name=&hobby& value=&&/&足球
type=&checkbox& name=&hobby& value=&&/&网球
type=&checkbox& name=&hobby& value=&&/&乒乓
type=&checkbox& name=&hobby& value=&&/&游泳
type=&checkbox& name=&hobby& id=&selectall& value=& & onclick=&SelectAll()&/&全选
function SelectAll(){
if(document.getElementById('selectall').checked == true){
var allValue = document.getElementsByName('hobby');
for(var i=0;i&allValue.i++){
allValue[i].checked=true;
6.常见40个常用的js页面效果图
1. oncontextmenu=&window.event.returnValue=false& 将彻底屏蔽鼠标右键
&table border oncontextmenu=return(false)&&td&no&/table& 可用于Table
2. &body onselectstart=&return false&& 取消选取、防止复制
3. onpaste=&return false& 不准粘贴
4. oncopy=&& oncut=&& 防止复制
5. &link rel=&Shortcut Icon& href=&favicon.ico&& IE地址栏前换成自己的图标
6. &link rel=&Bookmark& href=&favicon.ico&& 可以在收藏夹中显示出你的图标
7. &input style=&ime-mode:disabled&& 关闭输入法
8. 永远都会带着框架
&script language=&JavaScript&&&!--
if (window == top)top.location.href = &frames.htm&; //frames.htm为框架网页
// --&&/script&
9. 防止被人frame
&SCRIPT LANGUAGE=JAVASCRIPT&&!--&
if (top.location != self.location)top.location=self.
// --&&/SCRIPT&
10. 网页将不能被另存为
&noscript&&iframe src=&/blog/*.html&&;&/iframe&&/noscript&
11. &input type=button value=查看网页源代码&
onclick=&window.location = &view-source:&+ &&&&
12.删除时确认
&a href=&javascript：if(confirm(&确实要删除吗?&))location=&boos.asp?&areyou=删除&page=1&&&删除&/a&
13. 取得控件的绝对位置
//Javascript
&script language=&Javascript&&
function getIE(e){
var t=e.offsetT
var l=e.offsetL
while(e=e.offsetParent)
alert(&top=&+t+&/nleft=&+l);
//VBScript
&script language=&VBScript&&&!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName&&&BODY&
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
msgbox &top=&&t&chr(13)&&left=&&l,64,&得到控件的位置&
end function
--&&/script&
14. 光标是停在文本框文字的最后
&script language=&javascript&&
function cc()
var e = event.srcE
var r =e.createTextRange();
r.moveStart(&character&,e.value.length);
r.collapse(true);
r.select();
&input type=text name=text1 value=&123& onfocus=&cc()&&
15. 判断上一页的来源
javascript：
document.referrer
16. 最小化、最大化、关闭窗口
&object id=hh1 classid=&clsid:ADB880A6-D8FF-11CF-3B7A11&&&
¶m name=&Command& value=&Minimize&&&/object&
&object id=hh2 classid=&clsid:ADB880A6-D8FF-11CF-3B7A11&&&
¶m name=&Command& value=&Maximize&&&/object&
&OBJECT id=hh3 classid=&clsid:adb880a6-d8ff-11cf-3b7a11&&
&PARAM NAME=&Command& VALUE=&Close&&&/OBJECT&
&input type=button value=最小化 onclick=hh1.Click()&
&input type=button value=最大化 onclick=hh2.Click()&
&input type=button value=关闭 onclick=hh3.Click()&
本例适用于IE
17.屏蔽功能键Shift,Alt,Ctrl
function look(){&
if(event.shiftKey)&
alert(&禁止按Shift键!&); //可以换成ALT CTRL
document.onkeydown=&
18. 网页不会被缓存
&META HTTP-EQUIV=&pragma& CONTENT=&no-cache&&
&META HTTP-EQUIV=&Cache-Control& CONTENT=&no-cache, must-revalidate&&
&META HTTP-EQUIV=&expires& CONTENT=&Wed, 26 Feb :57 GMT&&
或者&META HTTP-EQUIV=&expires& CONTENT=&0&&
19.怎样让表单没有凹凸感？
&input type=text style=&border:1 solid #000000&&&
&input type=text style=&border-left: border-right: border-top: border-bottom:
1 solid #000000&&&/textarea&
20.&div&&span&&&layer&的区别？&
&div&(division)用来定义大段的页面元素，会产生转行&
&span&用来定义同一行内的元素，跟&div&的唯一区别是不产生转行&
&layer&是ns的标记，ie不支持，相当于&div&
21.让弹出窗口总是在最上面:
&body onblur=&this.focus();&&
22.不要滚动条?&
让竖条没有:&
&body style=&overflow:overflow-y:hidden&&&
让横条没有:&
&body style=&overflow:overflow-x:hidden&&&
两个都去掉？更简单了&
&body scroll=&no&&&
23.怎样去掉图片链接点击后，图片周围的虚线？
&a href=&#& onFocus=&this.blur()&&&img src=&/blog/logo.jpg& border=0&&/a&
24.电子邮件处理提交表单
&form name=&form1& method=&post& action=&&
enctype=&text/plain&&&
&input type=submit&
25.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()
26.如何设定打开页面的大小
&body onload=&top.resizeTo(300,200);&&
打开页面的位置&body onload=&top.moveBy(300,200);&&
27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动&
{background-image:url(/blog/logo.gif); background-repeat:no-&
background-position:background-attachment: fixed}&
28. 检查一段字符串是否全由数字组成
&script language=&Javascript&&&!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum(&&))
alert(checkNum(&&))
// --&&/script&
29. 获得一个窗口的大小
document.body.clientW document.body.clientHeight
30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert(&含有汉字&);
else alert(&全是字符&);
31.TEXTAREA自适应文字行数的多少
&textarea rows=1 name=s1 cols=27 onpropertychange=&this.style.posHeight=this.scrollHeight&&
&/textarea&
32. 日期减去天数等于第二个日期
&script language=Javascript&
function cc(dd,dadd)
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + &年& + (a.getMonth() + 1) + &月& + a.getDate() + &日&)
cc(&12/23/2002&,2)
33. 选择了哪一个Radio
&HTML&&script language=&vbscript&&
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
end function
&/script&&BODY&
&INPUT name=&radio1& type=&radio& value=&style& checked&Style
&INPUT name=&radio1& type=&radio& value=&barcode&&Barcode
&INPUT type=&button& value=&check& onclick=&checkme()&&
&/BODY&&/HTML&
34.脚本永不出错
&SCRIPT LANGUAGE=&JavaScript&&&
&!-- Hide&
function killErrors() {&
window.onerror = killE&
35.ENTER键可以让光标移到下一个输入框
&input onkeydown=&if(event.keyCode==13)event.keyCode=9&&
36. 检测某个网站的链接速度：
把如下代码加入&body&区域中:
&script language=Javascript&
setInterval(&tim++&,100)
var autourl=new Array()
autourl[1]=&&
autourl[2]=&javacool.3322.net&
autourl[3]=&&
autourl[4]=&&
autourl[5]=&&
function butt(){
document.write(&&form name=autof&&)
for(var i=1;i&autourl.i++)
document.write(&&input type=text name=txt&+i+& size=10 value=&/blog/测试中......&& =》&input type=text&
name=url&+i+& size=40& =》&input type=button value=GO
onclick=window.open(this.form.url&+i+&.value)&&br&&)
document.write(&&input type=submit value=刷新&&/form&&)
function auto(url)
b++
function run(){for(var i=1;i&autourl.i++)document.write(&&img src=http://&+autourl+&/&+Math.random()+& width=1 height=1
onerror=auto(&+&&)&&)}
run()&/script&
37. 各种样式的光标
auto ：标准光标
default ：标准箭头
hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：?帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标
38.页面进入和退出的特效
进入页面&meta http-equiv=&Page-Enter& content=&revealTrans(duration=x, transition=y)&&
推出页面&meta http-equiv=&Page-Exit& content=&revealTrans(duration=x, transition=y)&&&&
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
0 矩形缩小&
1 矩形扩大&
2 圆形缩小
3 圆形扩大&
4 下到上刷新&
5 上到下刷新
6 左到右刷新&
7 右到左刷新&
8 竖百叶窗
9 横百叶窗&
10 错位横百叶窗&
11 错位竖百叶窗
12 点扩散&
13 左右到中间刷新&
14 中间到左右刷新
15 中间到上下
16 上下到中间&
17 右下到左上
18 右上到左下&
19 左上到右下&
20 左下到右上
21 横条&
22 竖条&
23 以上22种随机选择一种
39.在规定时间内跳转
&META http-equiv=V=&REFRESH& content=&5;URL=&&
40.网页是否被检索
&meta name=&ROBOTS& content=&属性值&&
其中属性值有以下一些:
属性值为&all&: 文件将被检索，且页上链接可被查询；
属性值为&none&: 文件不被检索，而且不查询页上的链接；
属性值为&index&: 文件将被检索；
属性值为&follow&: 查询页上的链接；
属性值为&noindex&: 文件不检索，但可被查询链接；
属性值为&nofollow&: 文件不被检索，但可查询页上的链接。
最大化窗口？
&script language=&JavaScript&&
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
解决问题：由于层与下拉框之间的优先级是：下拉框 & 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的 z-index 属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下：
&div id=&menu& style=&position: visibility: top:20 left:20 width:100 height:200 background-color:#6699&&
& &tr&&td&item 1&/td&&/tr&
& &tr&&td&item 2&/td&&/tr&
& &tr&&td&item 3&/td&&/tr&
& &tr&&td&item 4&/td&&/tr&
& &tr&&td&item 5&/td&&/tr&
& &/table&
& &iframe src=&/blog/javascript：false& style=&position: visibility: top:0 left:0 width:100 height:200 z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';&&&/iframe&
&a href=&#& onclick=&document.getElementById('menu').style.visibility='visible'&&menu&/a&
& &select&&option&A form selection list&/option&&/select&
输入框也可以做的很漂亮了
&div align=¢er&&&input type=&hidden& name=&hao& value=&yes&&
&&&&&&&&&&&&& 外向数：&input&
&&&&& name=answer&
&&&&& style=&color: rgb(255,0,0); border-left: border-right: border-top: border-bottom: 1px solid rgb(192,192,192)&&
&&&&&&&&&&& 没回答的题数：&input&
&&&&& name=unanswer id=&unanswer&&
&&&&& style=&color: rgb(255,0,0); border-left: border-right: border-top: border-bottom: 1px solid rgb(192,192,192)&&
&&&&&&&&&&& &br&
&&&&&&&&&&& 总得分:
&&&&&&&&&&& &input&
&&&&& name=score id=&score&&
&&&&& style=&color: rgb(255,0,0); border-left: border-right: border-top: border-bottom: 1px solid rgb(192,192,192)&&
&&&&&&&&&&& 结 论:
&&&&&&&&&&& &input&
&&&&& name=xgjg id=&xgjg&&
&&&&& style=&color: rgb(255,0,0); border-left: border-right: border-top: border-bottom: 1px solid rgb(192,192,192)&&
&&&&&&&&&&& &br&
&&&&&&&&&&& &br&&
&&&&&&&&&&&&
&&&&&&&&&&& &input onClick=processForm(this.form) style=&FONT-FAMILY: 宋体; FONT-SIZE: 9pt& type=button value=查看结果 name=&button&&&
&&&&&&&&&&&& &input type=&reset& name=&Submit& value=&重做&&
&&&&&&&&&&& &/div&
注意：修改&body&为&body onload=&max.Click()&&即为打开最大
化窗口，而如果改为&body onload=&min.Click()&&就变为窗口一打开就最小化
&object id=&min& type=&application/x-oleobject& classid=&clsid:adb880a6-d8ff-11cf-3b7a11&&
&&&&&&&&&&& ¶m name=&Command& value=&Minimize&&
&&&&&&&&& &/object& &object id=&max& type=&application/x-oleobject& classid=&clsid:adb880a6-d8ff-11cf-3b7a11&&
&&&&&&&&&&& ¶m name=&Command& value=&Maximize&&
&&&&&&&&& &/object&
页面自动刷新（说明）
当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。
1，页面自动刷新：把如下代码加入&head&区域中&meta http-equiv=&refresh& content=&20&&,其中20指每隔20秒刷新一次页面.
2，页面自动跳转：把如下代码加入&head&区域中&meta http-equiv=&refresh& content=&20;url=&&,其中20指隔20秒后跳转到页面。
页面自动关闭
5000是指时间&body onLoad=&setTimeout(window.close, 5000)&&
弹出窗口自动关闭
10秒后弹出窗口自动关闭
注意：在新的tan.htm的body中要加 &onLoad=&closeit()&&
&script language=&JavaScript&&
var gt = unescape('%3e');
var popup =
var over = &Launch Pop-up Navigator&;
popup = window.open('', 'popupnav', 'width=225,height=235,resizable=1,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener =
popup.location.href = 'tan.htm';
&body&注意：这段代码是在新建文件中的
&script language=&JavaScript&&
&function closeit()
&&/script&
这个可不是&iframe&(引用）呀。是直接调用的。以下代码加入&body&区域
&object type=&text/x-scriptlet& width=&800&& height=&1000& data=&../index.htm&&
7.JavaScript经典效果集锦
申请加精，只有这样本帖子才不会沉下去，感觉这个帖子对大家很有用的!
一 实用且必用的小脚本代码:
脚本1：进入主页以后自动播放声音
&embed src=&pnm://10.13.31.90/~kayvin/mihunji.rm& hidden=true autostart=true loop=true&
脚本2：进入主页后自动最大话,省的去在自己单击了
self.moveTo(0,0)&
self.resizeTo(screen.availWidth,screen.availHeight)&
脚本3：显示现在时间的脚本
&script language=vbscript&document.write now&/script&
脚本4：显示最后修改时间的脚本
&script&document.write(document.lastModified)&/script&
脚本5：设为首页,加为收藏，加入频道,启动outlook发信
&a style=&cursor:hand&
onclick=&this.style.behavior=&url(#default#homepage)&;&
this.setHomePage(http://10.13.31.90/~kayvin/);&&&&设为首页&/a&&
&a style=&cursor:hand&&
onclick=&window.external.AddFavorite(location.href,document.title);&&加入收藏&/a&&
&a href=javascript:window.external.addChannel(&typhoon.cdf&)&加入频道&/a&&
&a href=&mailto:&&与我联系&/a&
脚本6：状态栏动态显示现在时间
function see(){&
window.setTimeout(&see()&,1000);&
today = new Date();&
self.status = today.toString();&
&/script&&
&body onload=see()&
脚本7：关闭窗口的脚本
&a href=javascript:close()&[关闭窗口]&/a&
脚本8：按下F12键,直接返回首页
&script&function look(){&
if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}&
if(document.onkeydown==null)&
{document.onkeydown=look}&
脚本9：后退,刷新,前进
&input type=button value=后退 onclick=history.go(-1)&&
&input type=button value=刷新 onclick=history.go(-0)&&
&input type=button value=前进 onclick=history.go(+1)&
脚本10：设定时间弹出窗口,4000=4秒,当然你可以自定义
&script&function l()&
window.open(& 10.13.31.90/~kayvin/ &,&name&,&width=500,height=150,border=0&)&
setTimeout(&l()&,4000)&
二 鼠标旁边的提示信息,类似与163登录后的页面提示效果：
&a href=&#& title=&这是提示&&tip&/a&&
&script Language=&JavaScript&&&
//***********默认设置定义.*********************&
tPopWait=50;//停留tWait豪秒后显示提示。&
tPopShow=5000;//显示tShow豪秒后关闭提示&
showPopStep=20;&
popOpacity=99;&
//***************内部变量定义*****************&
tFadeOut=&
tFadeWaiting=&
document.write(&&style type='text/css'id='defaultPopStyle'&&);&
document.write(&.cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000font-color: font-size: 12 padding-right: 4 padding-left: 4 height: 20 padding-top: 2 padding-bottom: 2 filter: Alpha(Opacity=0)}&);&
document.write(&&/style&&);&
document.write(&&div id='dypopLayer' style='position:z-index:1000;' class='cPopText'&&/div&&);&
function showPopupText(){&
var o=event.srcE&
MouseX=event.x;&
MouseY=event.y;&
if(o.alt!=null && o.alt!=&&){o.dypop=o.o.alt=&&};&
if(o.title!=null && o.title!=&&){o.dypop=o.o.title=&&};&
if(o.dypop!=sPop) {&
clearTimeout(curShow);&
clearTimeout(tFadeOut);&
clearTimeout(tFadeIn);&
clearTimeout(tFadeWaiting);&
if(sPop==null || sPop==&&) {&
dypopLayer.innerHTML=&&;&
dypopLayer.style.filter=&Alpha()&;&
dypopLayer.filters.Alpha.opacity=0;&
if(o.dyclass!=null) popStyle=o.dyclass&
else popStyle=&cPopText&;&
curShow=setTimeout(&showIt()&,tPopWait);&
function showIt(){&
dypopLayer.className=popS&
dypopLayer.innerHTML=sP&
popWidth=dypopLayer.clientW&
popHeight=dypopLayer.clientH&
if(MouseX+12+popWidth&document.body.clientWidth) popLeftAdjust=-popWidth-24&
else popLeftAdjust=0;&
if(MouseY+12+popHeight&document.body.clientHeight) popTopAdjust=-popHeight-24&
else popTopAdjust=0;&
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftA&
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopA&
dypopLayer.style.filter=&Alpha(Opacity=0)&;&
fadeOut();&
function fadeOut(){&
if(dypopLayer.filters.Alpha.opacity&popOpacity) {&
dypopLayer.filters.Alpha.opacity+=showPopS&
tFadeOut=setTimeout(&fadeOut()&,1);&
dypopLayer.filters.Alpha.opacity=popO&
tFadeWaiting=setTimeout(&fadeIn()&,tPopShow);&
function fadeIn(){&
if(dypopLayer.filters.Alpha.opacity&0) {&
dypopLayer.filters.Alpha.opacity-=1;&
tFadeIn=setTimeout(&fadeIn()&,1);&
document.onmouseover=showPopupT&
三 如果文字过长,则将过长的部分变成省略号显示：
&DIV STYLE=&width: 120 height: 50 border: 1&
& && && && &overflow: text-overflow:ellipsis&&&
&NOBR&就是比如有一行文字，很长，表格内一行显示不下.&/NOBR&&
四 滚动的图片
&script language=&javascript&&
imgArr=new Array()
imgArr[0]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
imgArr[1]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
imgArr[2]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
imgArr[3]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
imgArr[4]=&&a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=mvStart()'&&img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0&&/a&&
var moveStep=4& && &&&//步长，单位：pixel
var moveRelax=100& & //移动时间间隔，单位：ms
ns4=(document.layers)?true:false
var displayImgAmount=4& & //视区窗口可显示个数
var divWidth=220& & //每块图片占位宽
var divHeight=145& & //每块图片占位高
var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false
var startDivClipLeft
var nextDivClipRight
function initDivPlace(){
& & if (ns4){
& && &&&for (i=0;i&displayImgAi++){
& && && && &eval(&document.divOuter.document.divAds&+i+&.left=&+divWidth*i)
& && &&&for (i=displayImgAi&imgArr.i++){
& && && && &eval(&document.divOuter.document.divAds&+i+&.left=&+divWidth*displayImgAmount)
& & }else{
& && &&&for (i=0;i&displayImgAi++){
& && && && &eval(&document.all.divAds&+i+&.style.left=&+divWidth*i)
& && &&&for (i=displayImgAi&imgArr.i++){
& && && && &eval(&document.all.divAds&+i+&.style.left=&+divWidth*displayImgAmount)
function mvStart(){
& & timeID=setTimeout(moveLeftDiv,moveRelax)
function mvStop(){
& & clearTimeout(timeID)
function moveLeftDiv(){
& & if (ns4){
& && &&&for (i=0;i&=displayImgAi++){
& && && && &eval(&document.divOuter.document.divAds&+parseInt((startDnum+i)%imgArr.length)+&.left=document.divOuter.document.divAds&+parseInt((startDnum+i)%imgArr.length)+&.left-moveStep&)
& && &&&startDivClipLeft=parseInt(eval(&document.divOuter.document.divAds&+startDnum+&.clip.left&))
& && &&&nextDivClipRight=parseInt(eval(&document.divOuter.document.divAds&+nextDnum+&.clip.right&))
& && &&&if (startDivClipLeft+moveStep&divWidth){
& && && && &eval(&document.divOuter.document.divAds&+nextDnum+&.clip.right=&+divWidth)
& && && && &
& && && && &eval(&document.divOuter.document.divAds&+startDnum+&.left=&+divWidth*displayImgAmount)
& && && && &eval(&document.divOuter.document.divAds&+parseInt((nextDnum+1)%imgArr.length)+&.left=document.divOuter.document.divAds&+nextDnum+&.left+&+divWidth)
& && && && &eval(&document.divOuter.document.divAds&+parseInt((nextDnum+1)%imgArr.length)+&.clip.left=0&)
& && && && &
& && && && &
& && && && &startDnum=(++startDnum)%imgArr.length
& && && && &nextDnum=(startDnum+displayImgAmount)%imgArr.length
& && && && &
& && && && &startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
& && && && &nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
& && &&&}else{
& && && && &eval(&document.divOuter.document.divAds&+nextDnum+&.clip.left=0&)
& && && && &startDivClipLeft+=moveStep
& && && && &nextDivClipRight+=moveStep
& && &&&eval(&document.divOuter.document.divAds&+startDnum+&.clip.left=&+startDivClipLeft)
& && &&&eval(&document.divOuter.document.divAds&+nextDnum+&.clip.right=&+nextDivClipRight)
& & }else{
& && &&&for (i=0;i&=displayImgAi++){
& && && && &eval(&document.all.divAds&+parseInt((startDnum+i)%imgArr.length)+&.style.left=document.all.divAds&+parseInt((startDnum+i)%imgArr.length)+&.style.pixelLeft-moveStep&)
& && &&&startDivClipLeft=parseInt(eval(&document.all.divAds&+startDnum+&.currentStyle.clipLeft&))
& && &&&nextDivClipRight=parseInt(eval(&document.all.divAds&+nextDnum+&.currentStyle.clipRight&))
& && &&&if (startDivClipLeft+moveStep&divWidth){
& && && && &eval(&document.all.divAds&+nextDnum+&.style.clip='rect(0,&+divWidth+&,&+divHeight+&,0&+&)'&)
& && && && &
& && && && &eval(&document.all.divAds&+startDnum+&.style.left=&+divWidth*displayImgAmount)
& && && && &eval(&document.all.divAds&+parseInt((nextDnum+1)%imgArr.length)+&.style.left=document.all.divAds&+nextDnum+&.style.pixelLeft+&+divWidth)
& && && && &
& && && && &startDnum=(++startDnum)%imgArr.length
& && && && &nextDnum=(startDnum+displayImgAmount)%imgArr.length
& && && && &
& && && && &startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
& && && && &nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
& && &&&}else{
& && && && &startDivClipLeft+=moveStep
& && && && &nextDivClipRight+=moveStep
& && &&&eval(&document.all.divAds&+startDnum+&.style.clip='rect(0,&+divWidth+&,&+divHeight+&,&+startDivClipLeft+&)'&)
& && &&&eval(&document.all.divAds&+nextDnum+&.style.clip='rect(0,&+nextDivClipRight+&,&+divHeight+&,0)'&)
& & if (outHover){
& && &&&mvStop()
& & }else{
& && &&&mvStart()
function writeDivs(){
& & if (ns4){
& && &&&document.write(&&ilayer name=divOuter width=750 height=&+divHeight+&&&)
& && &&&for (i=0;i&imgArr.i++){
& && && && &document.write(&&layer name=divAds&+i+&&&)
& && && && &document.write(imgArr[i]+& &)
& && && && &document.write(&&/layer&&)
& && &&&document.write(&&/ilayer&&)
& && &&&document.close()
& && &&&for (i=displayImgAi&imgArr.i++){
& && && && &eval(&document.divOuter.document.divAds&+i+&.clip.right=0&)
& & }else{
& && &&&document.write(&&div id=divOuter style='position:relative' width=750 height=&+divHeight+&&&)
& && &&&for (i=0;i&imgArr.i++){
& && && && &document.write(&&div id=divAds&+i+& style='position:clip:rect(0,&+divWidth+&,&+divHeight+&,0)'&&)
& && && && &document.write(imgArr[i]+& &)
& && && && &document.write(&&/div&&)
& && &&&document.write(&&/div&&)
& && &&&for (i=displayImgAi&imgArr.i++){
& && && && &eval(&document.all.divAds&+i+&.style.clip='rect(0,0,&+divHeight+&,0)'&)
&BODY onload=javascript:mvStart()&
&SCRIPT language=javascript&writeDivs();initDivPlace();&/SCRIPT&
五 接收键盘指令的脚本:
&SCRIPT language=&JavaScript&&
var hotkey=97
var destination=&http://www.wyev.com&
if (document.layers)
document.captureEvents(Event.KEYPRESS)
function backhome(e){
if (document.layers){
if (e.which==hotkey)
window.location=destination
else if (document.all){
if (event.keyCode==hotkey)
window.location=destination
document.onkeypress=backhome
onkeydown=&javascript:onenter();&
function onenter(){
if(event.keyCode==13){
alert(&回车&);
六 让你的文本链接渐隐渐显:
&META NAME=&Description& CONTENT=&&&
&script language=&javascript& type=&text/javascript&&
startColor = 򣿔&; // 定义链接颜色
endColor = &#D8D1C5&;&&// 定义要渐变到最后的颜色
stepIn = 17;&
stepOut = 23;&
定义是否让所有的文本链接自动渐变，true为是，false为否
autoFade =&&
在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式
sloppyClass =&
hexa = new makearray(16);
for(var i = 0; i & 10; i++)
& & hexa[i] =
hexa[10]=&a&; hexa[11]=&b&; hexa[12]=&c&;
hexa[13]=&d&; hexa[14]=&e&; hexa[15]=&f&;
document.onmouseover =
document.onmouseout =
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i&7; i++){
&&for (j=0; j&16; j++){
& &if (Color.charAt(i) == hexa[j]){
& & if (i%2 !=0)
& &&&colorArr[Math.floor((i-1)/2)]=eval(j)*16;
& &&&colorArr[Math.floor((i-1)/2)]+=eval(j);
return colorA
function domouseover() {
&&if(document.all){
& &var srcElement = event.srcE
& &if ((srcElement.tagName == &A& && autoFade) || srcElement.className == &fade& || (sloppyClass && srcElement.className.indexOf(&fade&) != -1))
& && &&&fade(startColor,endColor,srcElement.uniqueID,stepIn);& && &
function domouseout() {
&&if (document.all){
& &var srcElement = event.srcE
& & if ((srcElement.tagName == &A& && autoFade) || srcElement.className == &fade& || (sloppyClass && srcElement.className.indexOf(&fade&) != -1))
& && &&&fade(endColor,startColor,srcElement.uniqueID,stepOut);
function makearray(n) {
& & this.length =
& & for(var i = 1; i &= i++)
& && &&&this[i] = 0;
function hex(i) {
& & if (i & 0)
& && &&&return &00&;
& & else if (i & 255)
& && &&&return &ff&;
& && & return && + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
& && &var hr = hex(r); var hg = hex(g); var hb = hex(b);
& && &element.style.color = &#&+hr+hg+
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];
if (fadeId[0] != null && fade[0] != element){
&&setColor(sr,sg,sb,eval(fadeId[0]));
&&var i = 1;
&&while(i & fadeId.length){
& &clearTimeout(fadeId[i]);
& &i++;
& & for(var i = 0; i &= i++) {
& &&&fadeId[i+1] = setTimeout(&setColor(Math.floor(& +sr+ & *(( & +step+ & - & +i+ & )/ & +step+ & ) + & +er+ & * (& +i+ &/& +
& &step+ &)),Math.floor(& +sg+ & * (( & +step+ & - & +i+ & )/ & +step+ & ) + & +eg+ & * (& +i+ &/& +step+
& &&)),Math.floor(& +sb+ & * ((& +step+ &-& +i+ &)/& +step+ &) + & +eb+ & * (& +i+ &/& +step+ &)),&+element+&);&,i*step);
fadeId[0] =
&A HREF=&&&让你的文本链接渐隐渐显&/A&
七 类似与QQ的好友/黑名单之类的树型菜单_极品:
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&TITLE& New Document &/TITLE&
&META NAME=&Generator& CONTENT=&EditPlus&&
&META NAME=&Author& CONTENT=&&&
&META NAME=&Keywords& CONTENT=&&&
&META NAME=&Description& CONTENT=&&&
if (!document.getElementById)
& & document.getElementById = function() { }
function initializeMenu(menuId, actuatorId) {
& & var menu = document.getElementById(menuId);
& & var actuator = document.getElementById(actuatorId);
& & if (menu == null || actuator == null)
& & //if (window.opera) // I'm too tired
& & actuator.parentNode.style.backgroundImage = &url(/images/plus.gif)&;
& & actuator.onclick = function() {
& && &&&var display = menu.style.
& && &&&this.parentNode.style.backgroundImage =
& && && && &(display == &block&) ? &url(/images/plus.gif)& : &url(/images/minus.gif)&;
& && &&&menu.style.display = (display == &block&) ? &none& : &block&;
window.onload = function() {
& && && && &initializeMenu(&productsMenu&, &productsActuator&);
& && && && &initializeMenu(&newPhonesMenu&, &newPhonesActuator&);
& && && && &initializeMenu(&compareMenu&, &compareActuator&);
&&font-family: verdana, helvetica, arial, sans-
#mainMenu {
&&background-color: #EEE;
&&border: 1px solid #CCC;
&&color: #000;
&&width: 203
#menuList {
&&margin: 0
&&padding: 10px 0px 10px 15
li.menubar {
&&background: url(/images/plus.gif) no-repeat 0em 0.3
&&font-size: 12
&&line-height: 1.5
&&list-style:
.menu, .submenu {
&&display:
&&margin-left: 15
&&padding: 0
.menu li, .submenu li {
&&background: url(/images/square.gif) no-repeat 0em 0.3
&&list-style:
a.actuator {
&&background-color:
&&color: #000;
&&font-size: 12
&&padding-left: 15
&&text-decoration:
a.actuator:hover {
&&text-decoration:
.menu li a, .submenu li a {
&&background-color:
&&color: #000;
&&font-size: 12
&&padding-left: 15
&&text-decoration:
.menu li a:hover, submenu li a:hover {
&&/*border-bottom: 1px dashed #000;*/
&&text-decoration:
span.key {
&&text-decoration:
&div id=&mainMenu&&
& && &&ul id=&menuList&&
& && &&&&li class=&menubar&&
& && && & &a href=&#& id=&productsActuator& class=&actuator&&图秀地带收藏夹&/a&
& && && & &ul id=&productsMenu& class=&menu&&
& && && && &&li&
& && && && &&&&a href=&#& id=&newPhonesActuator& class=&actuator&&我的好友&/a&
& && && && &&&&ul id=&newPhonesMenu& class=&submenu&&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&张三[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&李四[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&张三[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&李四[]&/a&&/li&
& && && && &&&&/ul&
& && && && &&/li&
& && && && &&li&
& && && && &&&&a href=&#& id=&compareActuator& class=&actuator&&陌生人&/a&
& && && && &&&&ul id=&compareMenu& class=&submenu&&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&张三[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&李四[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&张三[]&/a&&/li&
& && && && && & &li&&a href=&http://mc.mapabc.com/mapcard/card.jsp?pp=&&李四[]&/a&&/li&
& && && && &&&&/ul&
& && && && &&/li&
& && && & &/ul&
& && &&&&/li&
& && &&/ul&
& & &/div&
八 很多的脚本翻页:
&!doctype html public &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title& JavaScript: showPages v1.0 [by Lapuasi.com]&/title&
&script language=&JavaScript&&
showPages v1.1
=================================
Infomation
----------------------
Author : Lapuasi
Web : http://www.lapuasi.com
----------------------
var pg = new showPages('pg');
pg.pageCount = 12; //定义总页数(必要)
pg.argName = 'p';& & //定义参数名(可选,缺省为page)
pg.printHtml();& && &&&//显示页数
Supported in Internet Explorer, Mozilla Firefox
function showPages(name) { //初始化属性
& & & & this.name =& && &//对象名称
& & & & this.page = 1;& && && &//当前页数
& & & & this.pageCount = 1;& & //总页数
& & & & this.argName = 'page'; //参数名
& & & & this.showTimes = 1;& & //打印次数
showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
& & & & var args = location.
& & & & var reg = new RegExp('[/?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
& & & & var chk = args.match(reg);
& & & & this.page = RegExp.$1;
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
& & & & if (isNaN(parseInt(this.page))) this.page = 1;
& & & & if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
& & & & if (this.page & 1) this.page = 1;
& & & & if (this.pageCount & 1) this.pageCount = 1;
& & & & if (this.page & this.pageCount) this.page = this.pageC
& & & & this.page = parseInt(this.page);
& & & & this.pageCount = parseInt(this.pageCount);
showPages.prototype.createHtml = function(mode){ //生成html代码
& & & & var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
& & & & if (mode == '' || typeof(mode) == 'undefined') mode = 0;
& & & & switch (mode) {
& & & & & & & & case 0 : //模式1 (页数,首页,前页,后页,尾页)
& & & & & & & & & & & & strHtml += '&span class=&count&&Pages: ' + this.page + ' / ' + this.pageCount + '&/span&';
& & & & & & & & & & & & strHtml += '&span class=&number&&';
& & & & & & & & & & & & if (prevPage & 1) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&<&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&a href=&javascript:' + this.name + '.toPage(1);&&&&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&&a href=&javascript:' + this.name + '.toPage(' + prevPage + ');&&<&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & for (var i = 1; i &= this.pageC i++) {
& & & & & & & & & & & & & & & & if (i & 0) {
& & & & & & & & & & & & & & & & & & & & if (i == this.page) {
& & & & & & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&[' + i + ']&/span&';
& & & & & & & & & & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&&a href=&javascript:' + this.name + '.toPage(' + i + ');&&[' + i + ']&/a&&/span&';
& & & & & & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & if (nextPage & this.pageCount) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&>&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&&a href=&javascript:' + this.name + '.toPage(' + nextPage + ');&&>&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&&&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&&br /&';
& & & & & & & & & & & &
& & & & & & & & case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
& & & & & & & & & & & & strHtml += '&span class=&count&&Pages: ' + this.page + ' / ' + this.pageCount + '&/span&';
& & & & & & & & & & & & strHtml += '&span class=&number&&';
& & & & & & & & & & & & if (prevPage & 1) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&<&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&a href=&javascript:' + this.name + '.toPage(1);&&&&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&&a href=&javascript:' + this.name + '.toPage(' + prevPage + ');&&<&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & if (this.page % 10 ==0) {
& & & & & & & & & & & & & & & & var startPage = this.page - 9;
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & var startPage = this.page - this.page % 10 + 1;
& & & & & & & & & & & & }
& & & & & & & & & & & & if (startPage & 10) strHtml += '&span title=&Prev 10 Pages&&&a href=&javascript:' + this.name + '.toPage(' + (startPage - 1) + ');&&...&/a&&/span&';
& & & & & & & & & & & & for (var i = startP i & startPage + 10; i++) {
& & & & & & & & & & & & & & & & if (i & this.pageCount)
& & & & & & & & & & & & & & & & if (i == this.page) {
& & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&[' + i + ']&/span&';
& & & & & & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&&a href=&javascript:' + this.name + '.toPage(' + i + ');&&[' + i + ']&/a&&/span&';
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & if (this.pageCount &= startPage + 10) strHtml += '&span title=&Next 10 Pages&&&a href=&javascript:' + this.name + '.toPage(' + (startPage + 10) + ');&&...&/a&&/span&';
& & & & & & & & & & & & if (nextPage & this.pageCount) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&>&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&&a href=&javascript:' + this.name + '.toPage(' + nextPage + ');&&>&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&&&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&&br /&';
& & & & & & & & & & & &
& & & & & & & & case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
& & & & & & & & & & & & strHtml += '&span class=&count&&Pages: ' + this.page + ' / ' + this.pageCount + '&/span&';
& & & & & & & & & & & & strHtml += '&span class=&number&&';
& & & & & & & & & & & & if (prevPage & 1) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&<&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&a href=&javascript:' + this.name + '.toPage(1);&&&&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&&a href=&javascript:' + this.name + '.toPage(' + prevPage + ');&&<&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & if (this.page != 1) strHtml += '&span title=&Page 1&&&a href=&javascript:' + this.name + '.toPage(1);&&[1]&/a&&/span&';
& & & & & & & & & & & & if (this.page &= 5) strHtml += '&span&...&/span&';
& & & & & & & & & & & & if (this.pageCount & this.page + 2) {
& & & & & & & & & & & & & & & & var endPage = this.page + 2;
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & var endPage = this.pageC
& & & & & & & & & & & & }
& & & & & & & & & & & & for (var i = this.page - 2; i &= endP i++) {
& & & & & & & & & & & & & & & & if (i & 0) {
& & & & & & & & & & & & & & & & & & & & if (i == this.page) {
& & & & & & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&[' + i + ']&/span&';
& & & & & & & & & & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & & & & & & & & & if (i != 1 && i != this.pageCount) {
& & & & & & & & & & & & & & & & & & & & & & & & & & & & strHtml += '&span title=&Page ' + i + '&&&a href=&javascript:' + this.name + '.toPage(' + i + ');&&[' + i + ']&/a&&/span&';
& & & & & & & & & & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & if (this.page + 3 & this.pageCount) strHtml += '&span&...&/span&';
& & & & & & & & & & & & if (this.page != this.pageCount) strHtml += '&span title=&Page ' + this.pageCount + '&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&[' + this.pageCount + ']&/a&&/span&';
& & & & & & & & & & & & if (nextPage & this.pageCount) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&>&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&&a href=&javascript:' + this.name + '.toPage(' + nextPage + ');&&>&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&&&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&&br /&';
& & & & & & & & & & & &
& & & & & & & & case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
& & & & & & & & & & & & strHtml += '&span class=&count&&Pages: ' + this.page + ' / ' + this.pageCount + '&/span&';
& & & & & & & & & & & & strHtml += '&span class=&arrow&&';
& & & & & & & & & & & & if (prevPage & 1) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&9&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&7&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&First Page&&&a href=&javascript:' + this.name + '.toPage(1);&&9&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Prev Page&&&a href=&javascript:' + this.name + '.toPage(' + prevPage + ');&&7&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & if (nextPage & this.pageCount) {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&8&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&:&/span&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&span title=&Next Page&&&a href=&javascript:' + this.name + '.toPage(' + nextPage + ');&&8&/a&&/span&';
& & & & & & & & & & & & & & & & strHtml += '&span title=&Last Page&&&a href=&javascript:' + this.name + '.toPage(' + this.pageCount + ');&&:&/a&&/span&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&&br /&';
& & & & & & & & & & & &
& & & & & & & & case 4 : //模式4 (下拉框)
& & & & & & & & & & & & if (this.pageCount & 1) {
& & & & & & & & & & & & & & & & strHtml += '&select name=&toPage& disabled&';
& & & & & & & & & & & & & & & & strHtml += '&option value=&0&&No Pages&/option&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & var chkS
& & & & & & & & & & & & & & & & strHtml += '&select name=&toPage& onchange=&' + this.name + '.toPage(this);&&';
& & & & & & & & & & & & & & & & for (var i = 1; i &= this.pageC i++) {
& & & & & & & & & & & & & & & & & & & & if (this.page == i) chkSelect=' selected=&selected&';
& & & & & & & & & & & & & & & & & & & & else chkSelect='';
& & & & & & & & & & & & & & & & & & & & strHtml += '&option value=&' + i + '&' + chkSelect + '&Pages: ' + i + ' / ' + this.pageCount + '&/option&';
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/select&';
& & & & & & & & & & & &
& & & & & & & & case 5 : //模式5 (输入框)
& & & & & & & & & & & & strHtml += '&span class=&input&&';
& & & & & & & & & & & & if (this.pageCount & 1) {
& & & & & & & & & & & & & & & & strHtml += '&input type=&text& name=&toPage& value=&No Pages& class=&itext& disabled=&disabled&&';
& & & & & & & & & & & & & & & & strHtml += '&input type=&button& name=&go& value=&GO& class=&ibutton& disabled=&disabled&&&/option&';
& & & & & & & & & & & & } else {
& & & & & & & & & & & & & & & & strHtml += '&input type=&text& value=&Input Page:& class=&ititle& readonly=&readonly&&';
& & & & & & & & & & & & & & & & strHtml += '&input type=&text& id=&pageInput' + this.showTimes + '& value=&' + this.page + '& class=&itext& title=&Input page& onkeypress=&return ' + this.name + '.formatInputPage(event);& onfocus=&this.select()&&';
& & & & & & & & & & & & & & & & strHtml += '&input type=&text& value=& / ' + this.pageCount + '& class=&icount& readonly=&readonly&&';
& & & & & & & & & & & & & & & & strHtml += '&input type=&button& name=&go& value=&GO& class=&ibutton& onclick=&' + this.name + '.toPage(document.getElementById(/'pageInput' + this.showTimes + '/').value);&&&/option&';
& & & & & & & & & & & & }
& & & & & & & & & & & & strHtml += '&/span&';
& & & & & & & & & & & &
& & & & & & & & default :
& & & & & & & & & & & & strHtml = 'Javascript showPage Error: not find mode ' +
& & & & & & & & & & & &
& & & & return strH
showPages.prototype.createUrl = function (page) { //生成页面跳转url
& & & & if (isNaN(parseInt(page))) page = 1;
& & & & if (page & 1) page = 1;
& & & & if (page & this.pageCount) page = this.pageC
& & & & var url = location.protocol + '//' + location.host + location.
& & & & var args = location.
& & & & var reg = new RegExp('([/?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
& & & & args = args.replace(reg,'$1');
& & & & if (args == '' || args == null) {
& & & & & & & & args += '?' + this.argName + '=' +
& & & & } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
& & & & & & & & & & & & args += this.argName + '=' +
& & & & } else {
& & & & & & & & & & & & args += '&' + this.argName + '=' +
& & & & return url +
showPages.prototype.toPage = function(page){ //页面跳转
& & & & var turnTo = 1;
& & & & if (typeof(page) == 'object') {
& & & & & & & & turnTo = page.options[page.selectedIndex].
& & & & } else {
& & & & & & & & turnTo =
& & & }
我要回帖
更多推荐
- ·如何分辨一个微信小程序第一款游戏游戏是使用什么引擎开发的？
- ·龙腾世纪怎么看游戏时间3游戏周期,狂猎与龙腾世纪怎么看游戏时间3
- ·有人知道JDG无畏契约战队选择的A980Pro电竞无线鼠标排行榜前十名在续航方面有何优势，能否满足长时间训练和比赛的需要？
- ·新部落冲突5本最难打的防御阵型守卫战5-4怎么过（新部落冲突5本最难打的防御阵型守卫战5-4通关攻略）「每日一条」
- ·圣安地列斯被删除的内容原版好像不可以吧？
- ·这里1减去负五分之三的二次方负载是怎么得到25分之16的
- ·如何通过深圳市企业创新促进会企业品牌打造？
- ·安装不了QQ啊1元纸币写求救信
- ·昆山中鼎联盛电子有限公司 能不能申请入党 如果能在怎么申请
- ·很急 有人能解爱情占星骰子解读思路吗？
- ·李白写的诗有哪些的增汪龙是怎么写的
- ·山西省适应性考试20182018届中考考前适应卷A
- ·stc单片机的工作原理原理及应用 何宾
- ·请问儿童的手脚上的是那种儿童皮肤病的种类图片？会不会是肝掌？
- ·高考第一志愿录取几率更大吗如果下巴截骨前移失败几率了请问第三志愿还有希望吗
- ·签了合同，在工厂做了。超过一个月没签合同但是没有签转正申请书，请问三天内可以辞职有人嘛？？？
- ·高考专项体验收据丢失证明怎么写写
- ·肛裂便血不肛裂不做手术会好吗吗？
- ·在Editplus中用control怎么打开总图+鼠标打开一个DHTML.js文件就能看到系统函数的具体解析,请大神指点是怎么设置的
- ·北京天津市海拔多少米高度是多少
- ·我的银行卡流水每月只有3000这样可以银行卡一年没流水可以办小额贷款吗吗？
- ·国家药审中心待遇怎样到底什么样？
- ·长沙教外国人汉语学汉语去哪儿？
- ·如图，两个台球手架与白球的距离之间的距离怎么算，已知晶胞密度和晶胞相对原子质量
- ·求她快手id怎么查询d
- ·统计单元格出现次数数字，统计出现的次数后，怎么通过第二行的变化，统计数字的的次数
- ·Android Studio欢迎界面左边文字游戏内重叠界面了，怎么解决啊？
- ·2019年复读生不能考2019艺术类校考学校学校？
- ·油轨燃油泄压阀和调节阀打开是什么原因
- ·长沙学大教育老师待遇哪里有中文老师？可以学中文
- ·深圳观澜深圳启悦光电观澜分厂有限公司里面品质部FQC的职责是什么？
- ·下午下载个融360点工商融e借和信用卡额度点工商详情那里，这详情是什么意思？真的额度、通过率、3天～批卡怎么解释呢
- ·求题2.6.2的详细初一几何题解题过程程
- ·对汇率小数位是什么意思报价,银行一般只报小数
