编程记录，亲测有效

在《【JavaScript】兼容IE6的JS模板化》（点击打开链接）和《【jQuery】利用jTemplates实现兼容IE6的jQuery模板化》（点击打开链接）我曾经提到如何分别在javascript和jquery完成前端模板化，让前端代码规范起来。不过现在的许许多多的网页框架，好像Springmvc和Thinkphp甚至连微软的ASP.NET都有自家的一套，将前端后端形成起来，根本无须这些J

这个其实根本不用自己写，因为在网上就有一个写的非常不错的js。做到如下效果，如果是PC、平板访问这个页面，则显示PC版的页面，如果是手机访问这个页面则跳到手机版的页面，同时不加载PC版页面，直接跳转。首先，目录结构如下：其中JS文件夹中的uaredirect.js是从网上down下来的，其代码如下：function uaredirect(f){try{if(docu

大家上网的时候肯定见到过加载失败的红叉图片，具体如下图。当然现在Google Chrome与Firefox对其处理会好看一些。其实可以利用图片标签的onerror事件对其处理的，要求其加载失败之后，马上加载一张默认图片，而不是显示为红叉叉。其代码如下：意为，如果加载s.png这张图片失败了，就马上去加载xx.png这张图片，同时xx.png这张图片要求其以80x80的方式加载。

利用Javascript获取当前页的URL，这个问题起来好像很复杂，如果第一次去想这个问题，很多人估计又在琢磨到底又是哪个神一般的Javascript函数。其实不是，Javascript获取当前页的URL的函数就是我们经常用来重定向的window.location.href。比如如下函数：var url=window.location.href;var loc = url.subs

有时候，比如共100页，并不一定要仅提供页首、页尾按钮，然后10页10页显示，显示页首，中间页，页尾，当前页的前后三页，省略其它页也是一种不错的选择。比如如下的分页：首先，页面布局很简单，两个行内文本，一个显示当前的页数，与设定一个总页数。这里假定总页数共40页。然后，用一个id="pagingDiv"的div放置分页链接。

setTimeout经常与setInterval混用，这东西常见于定时调用一段函数，比如在《【JavaScript】一个同步于本地时间的动态时间》（点击打开链接）中一个简单的setInterval时钟，你也可以写成如下的代码：clockclock();function clock(){ document.getElementById("clock").innerHT

如果要做出如下效果，每次刷新网页则产生一种颜色，其实非常简单，产生随机颜色的根本核心就是随机构造出一个六位数，JavaScript的随机数的问题而且这个六位数的每一个数位0~f之内，因此就有了如下的方法：1、首先是一个HTML布局，p标签是是用来放当前颜色的，div的背景颜色就是这个颜色 randomColor 2、之后是核心的脚本：

在JavaScript，如果以以下的方式定义一个数据， var Array=[1,2,3,4,]; for(var i=0;i<Array.length;i++){ alert(Array[i]); }那么在不同的网页对这个数组的解析方法不同的。在IE系列，至少在IE6-IE8会认为这个Array数组的长度是5，最后一个元素是undefined而在FireFox

这个功能在网页中也是很常见的，友情链接部分、表单填写个人主页的时候，使用JavaScript取验证是否为网址。这个检验不好写，最好还是使用正则表达式去认证。规定，输入的东西只能是http://与https://开头，而且必须是网址。有人说，为何像www.1.com这样的网页不行呢？这是以免你拿用户输入的东西构造超级链接的时候，a标签中的href属性如果遇不到http://或者htt

JavaScript中是没有replaceAll的，只有replace，replace只能替换字符中的第一个字符，而且这个replace里面不支持正则表达式，以达到replaceAll的目的。不过可以自己写一个JavaScript中的replaceAll，也不用写到str.replaceAll，一点就能够用的程度的程度，写一个返回值为字符串类型、处理之后的字符串；形式参数为要处理的字符串，要被

离开页面前的提示不可以用onunload去做，因为它只是兼容IE，你要兼容Google与FireFox就蛋疼了。而且这个事件还是关闭之后才会触发的。取而代之可以用onbeforeunload去实现。onbeforeunload可以在用户关闭或刷新窗口、或者点击本页内的任何超级链接都会触发的。其JavaScript代码如下：window.onbeforeunload=fun

如果你要开发论坛之类的网页工程，少不了，提供编辑功能，而且这个编辑要求不刷新，要用编辑框马上代替所要编辑的文本，还要提供保存按钮，这样的编辑框才能提高用户体现。其实，不难，纯粹用JavaScript就已经能实现了。至于要把编辑的内容保存的数据库的步骤，请自行查询关于Ajax的东西。这个要求的难点在，如果是一个类似论坛之类的东西，需要的编辑框必定有多个。你可以利用ASP.NET,JSP,PHP这些服

上次在《【JavaScript】兼容IE6可调可控的图片滑块》（点击打开链接）的算法写得很不好，如果你要做N个图片的图片滑块，每次显示X张图片，则要一次性地多加载X-1张图片，还要用一种显示框移动的方法去实现。更可怕的是，还要理所当然地认为就是这样的。虽然这个违背常人思维方式在网上广泛流传，而且好像还是公式一样，就只有一种实现方法，其实不是的，明显可以利用文件碎片DocumentFragment去

下拉菜单dropdown在很多前端框架里面都有，直接拿来用就可以的，但是框架内的下拉菜单不好改，也很可能会有兼容性问题。其实这东西完全可以利用HTML+CSS+Javascript去实现的。效果如下：其基本制作思想如下：首先是HTML与CSS的布局，先布置一个table，这个table里面有两行，一行放下拉按钮，一行放下拉菜单，占据整个宽度的100%，单元格之间的行

模态框这东西在很多前端框架里面也是存在的，但是很多前端框架，如Bootstrap，AmazeUI，Jquery对IE6的兼容性极其糟糕，因此如果自己手写一个纯粹javascript无任何插件的的模态框，不仅能够兼容IE6，对其它浏览器很有很大的兼容性，同时，也好改。一、基本目标比如如下的模态框，怎么用在纯粹html+css+javascript，在无任何前端插件的情况下实现呢？

复选框的全选、反选，判断哪些复选框被选中，这个功能不难做，利用document.getElementsByName("xxx");能够轻易实现，注意其返回值是一个节点数组便是了。不过这功能对于用户来说是非常贴心的。下面举一个例子还说明这个问题。首先是以下的布局：HTML代码如下，非常简单，三个按钮，分别设置其onclick事件所对应处理的javascript函数。之后有

所谓的JS模板化并不是什么遥远的东西，在Ajax运用越来越多的今天，这基本都快成为了一种基本诉求了。这东西离前端工程师们并不遥远，举个例子。如下的一个简单不能再简单的效果，这个a=2，其中这个2的数据来自于Ajax返回。至于不知道什么是Ajax的同学，可以参考《【Servlet】Servlet3.0与纯javascript通过Ajax交互》（点击打开链接）。你打算怎么写代码？相

实现一个在file文件域中选定图片文件之后，马上进行预览。不用预上传到服务器，整缩略图再打回前端用Ajax去预览的。直接利用JavaScript即可以完成，而且还可以兼容IE6。具体效果，如下图所示：具体实现是在非IE浏览器利用HTML5去显示，在IE浏览器则直接调用IE的滤镜功能去实现。具体代码如下： 图片上传本地预览

有时候，在JavaScript中，即使设置了ID也有可能出现document.getElementById()获取不到的情况，然后你就开始想document是否写错之类的，其实根本就不是你的代码的大小写出现了问题，主要是你还没有搞清楚直接写在之间东西与写在window.onload=function(){}里面的东西的区别到底在哪里。比如如下的非常一段简单代码，在网页中除了一个ID为a，然后里

收起折叠效果本身不难，但是div是否超出高度不应该利用innerHTML去判断，收起折叠的时候把所有div的innerHTML搞到一个变量又把一个变量的内容通过截取字符串的方式，又将其放到div。下面提供一种通过div本身固有的高度来判断div是否过高，如果过高则提供折叠收起的按钮。div的高度通过document.getElementById("div的id").offsetHeight去判

这本来不是一个问题，但如果好好研究一下你真的不知道怎么搞。简而言之，就是”Javascript中，双引号里套单引号，那单引号里套什么？“的问题。这样的问题相信大家一定会经历过，毕竟现在Ajax编程越来越花样作死，这没有办法，同时涉及多行HTML写作问题。曾经天真地以为Javascript中，双引号里套单引号，那单引号里套单引号就没事，然而出来的结果却是浏览器无法解析。下面提供一种解决方案，

本文是《【jQuery】兼容IE6的滚动监听》（点击打开链接）的进一步改进，这次无须引入jQuery纯粹使用JavaScript来实现，精简了语法。同时，不会在JavaScript处写过多的代码，导致难以维护。具体效果如下，此乃IE6的效果：这里运用了锚点跳转，同时，随着滚动条的滚动右方目录的超级链接会变色。这个目录左方的点的实心还会进一步变化。具体思想如下，主要是判断此时浏览

现在网上的回到顶部组件，懂不懂就一大段让人看不懂javascript代码，还各种不兼容。起始这个组件，完全可以自己利用javascript的滚动事件window.onscroll与position：fixed手写。IE6的兼容性问题主要出现在position：fixed上面，如何解决已经在《【CSS】IE6中的position：fixed问题与随滚动条滚动的效果》（点击打开链接）介绍过了。下面

在《【JavaScript】网页中对代码的处理，代码高亮插件SyntaxHighlighter》（点击打开链接）已经提及到，国内著名，完美兼容IE6的富文本编辑器UEditor已经自然整合代码高亮插件SyntaxHighlighter插件了，那么如何实现用户贴代码功能呢？值得注意的是，单纯的富文本编辑器UEditor写一段代码，是无法实现如代码高亮插件SyntaxHighlighter带行号、

在网页中，如何处理代码，尤其在一些IT博客网站中成为一个难题。难点在于如何将这些代码的关键字高亮表示，如何将代码与网页原有的HTML区别起来。其实有一款很实用、很出色的代码高亮插件SyntaxHighlighter能够解决这一难题。然而不知道为何国内的网站对这方面的资料甚少。这款插件的效果如下图所示：除了相关代码的关键字高亮以外，复制代码起来毫不费劲，不会不小心复制到行号。关键的是

在JavaScript中，focus()虽然比较罕见，但还是比较有用的，主要是用于获取焦点，说白了，就是自动把光标放到此组件上面，无须用户再次操作。直接用一个例子说明问题： self_focus window.setTimeout(function(){ window

如下的两个不同的表单form1与form2，一个通过button按钮的Onclick事件去验证表单是否符合要求后才能提交，另一个通过form表单的onsubmit="return xx()"的形式去验证。这里先顺带插一句，没有onsubmit="xx()"的形式，其中xx()是JavaScript中的验证函数，不加onsubmit="xx()"打死都验证不了。如下的代码：

在一些不正规的网站，尤其是那些挂满广告的下载站，经常在你点击的下载链接之前，无论你点击网页的任何一处都会弹出新窗口。这样的效果，可以轻松用JavaScript做到，还可以专门指定点击某一区域的Div，才触发打开新窗口的事件。比如下图的效果：在原网页中，指定一个Div，无论用户点击这个Div的任意区域，都会打开新窗口，而点击其它地方则不会。在新窗口的地址栏不可以编辑，不能被调

本来一个小小的表单的参数传递时非常简单的，是基础的基础，但是考虑到现在网上的不法分子越来越猖獗，而且那些平时没事做一心钻研黑客技术的人越来越多，你在表单提交之前，首先就应该在前台中处理一下，后台部分的当然也要处理sql注入的问题，不过本文主要讨论前台表单参数传递的问题。真不知道那些一心黑别人网站的人是怎么样，以为自己的技术很牛逼的样子，其实，有这么强的技术，就应该好好找份工作拿拿高薪，而不是专注黑

前端开发工作中，经常需要将HTML的左右尖括号等转义成实体形式。我们不能把，＆等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。转义字符（Escape Sequence）也称字符实体(Character Entity)。定义转义字符串的主要原因是1、“”等符号已经用来表示HTML TAG，因此不能直接当作文本中的符号来使用。但有时需求是在HTML页面上使用这些符号，所以需要定义它的转义

图片滑块其实也与图片轮播一样，无需这么多奇奇怪怪的代码就能够实现，只是布局有点复杂，而且这东西在Bootstrap里面也没有，在网页中，这个组件也越来越少见的，毕竟这个小小的组件太浪费网络资源了，实现的逻辑还比较复杂，如果不要被特别要求，能不做最好不好。有时候，如果一个如同《【CSS】黑色幽默，兼容IE6的纯原生态的门户网站》（点击打开链接）的简单网页就能够交货，就不要卖弄你的前端技巧了。

以上这两个小功能在一些新式的手机页面是很有用的如何光标放上输入框就触发事件，离开输入框就触发另一个事件呢？即使用户不输入任何东西……页间传值很简单，但在页内的锚点之间是如何传值呢？一、基本目标有一个页面，上面有一个输入框，一个超级链接，这两个东西是没有任何关联的，只是因为功能不大，所以把两个功能合起来写1、输入框功能一旦把光标放上对话框背景就变成红色，一

标签页是一个很常见的东西，在一些框架中也就很常见的，但未必所有人都知道怎么写，很多人知道怎么在网上复制一份是真的，这样不好，往往需要用大量的时间去修改网上复制下来的东西，还不如自己写一份快。一、基本目标创建一个如下的标签页，在IE8中与谷歌浏览器中的效果如下，几乎没有区别谷歌浏览器：IE8：二、制作过程1、首先布置好场景，在一个图层内：图层1~图

本文是对《【JavaScript】一个同步于本地时间的动态时间》一文（点击打开链接）的改进JavaScript里面的Date类型除了可以直接toLocaleString()，转化成一个以系统格式的时间之外还可以时间自定义格式，比如可以构造于一个仿QQ聊天框的同步于本地时间的动态时钟具体代码如下：自定义时钟setInterval("clock()",1

我知道这个游戏命名得很烂，但至少是有个游戏吧，自上次《【JavaScript】贪吃蛇》（点击打开链接）时隔两个月终于有时间再写写游戏了~JavaScript真的是一门碉堡的语言，简单的一个js就可以写出一个游戏！没有c++与java写很久都没有把游戏写出来，而且里面的线程实在是烦死了~一、基本目标是这样的一个游戏：

一、基本概念这部分也就是所谓的“HTML DOM”，所谓HTML DOM也就是Web页面加载规则，是一个规则，也就是网页组成的基本公式。也就是所有网页都必须按照：……的规则编写，也按照这样的规则加载。所谓的“网页节点”，也叫“DOM节点”的通俗解释，例如html节点下的内容就是之间所有内容，body节点下的内容就是之间的所有内容。HTML DOM是这样规定的：1、整个文档是一个文档

一、基本目标在JavaScript设计一个分秒倒计时器，一旦时间完成使按钮变成不可点击状态具体效果如下图，为了说明问题，调成每50毫秒也就是每0.05跳一次表，真正使用的时候，把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可。在时间用完之前，按钮还是可以点击的。时间用完之

看起来好像很复杂的贪吃蛇，到底是怎么用JavaScript去实现的？其实你只要会用setInterval去现实一个时钟，会使用JavaScript的键盘响应事件，会使用JavaScript去操作html节点，也就是HTML DOM与BOM，这个问题应该不会有太大的问题。下面就来一步一步地，剖析怎么用JavaScript，也就是说完全可以记事本写一个html文件，放在任意一个浏览器中，把贪吃蛇搞起来！

JavaScript无需布置任何环境直接在HTML写代码就可以

轮询（Polling）是一种CPU决策如何提供周边设备服务的方式，又称“程控输出入”（Programmed I/O）。轮询法的概念是，由CPU定时发出询问，依序询问每一个周边设备是否需要其服务，有即给予服务，服务结束后再问下一个周边，接着不断周而复始。轮询法实作容易，但效率偏低。在JavaScript使用setInterval函数作简单的轮询操作，可以随时判定某一个参数值，但不用刷新页面，即不