JS存档:insertAfter()函数(0 位领导批示)

  • 2008-03-1
  • 分类：JavaScript
  • 作者：银子
  • 3,996 位领导视察

insertAfter(newElement, targetElement)
newElement 创建的新元素
targetElement 插入到这个元素之后

JS没有内置这个函数真是不方便呐.存档方便今后查找

  1. function insertAfter(newElement, targetElement)
  2. {
  3.     var parent = targetElement.parentNode;
  4.     if(parent.lastChild == targetElement) 
  5.     {
  6.         parent.appendChild(newElement);
  7.     } 
  8.     else
  9.     {
  10.         parent.insertBefore(newElement, targetElement.nextSibling);
  11.     }
  12. }
Tags : , , ,
0 位领导批示

JS中文字符串转换unicode编码函数(0 位领导批示)

  • 2008-03-1
  • 分类：Ajax, JavaScript
  • 作者：银子
  • 4,147 位领导视察

AJAX传递中文字符串时必须把中文字符串编码成unicode,一般会用到JS的自带函数escape().不过找到了更好的函数来确决中文字符转换成unicode编码的函数

  1. function uniencode(text)
  2. {
  3.     text = escape(text.toString()).replace(/\+/g, "%2B");
  4.     var matches = text.match(/(%([0-9A-F]{2}))/gi);
  5.     if (matches)
  6.     {
  7.         for (var matchid = 0; matchid < matches.length; matchid++)
  8.         {
  9.             var code = matches[matchid].substring(1,3);
  10.             if (parseInt(code, 16) >= 128)
  11.             {
  12.                 text = text.replace(matches[matchid], '%u00' + code);
  13.             }
  14.         }
  15.     }
  16.     text = text.replace('%25', '%u0025');
  17.  
  18.     return text;
  19. }

当然服务器端要对编码过的字符串进行第二次转码.把字符串转换成UTF-8编码.

全文阅读 »

Tags : , , , ,
0 位领导批示

JS获取页面实际大小函数(0 位领导批示)

  • 2008-01-25
  • 分类：JavaScript
  • 作者：银子
  • 1,285 位领导视察

Lightbox里面的一个函数,能把页面实际的高宽与浏览器可视面积的高宽保存在一个数组中..非常好用.记录一下

  1. function getPageSize(){
  2.    
  3.     var xScroll, yScroll;
  4.    
  5.     if (window.innerHeight && window.scrollMaxY) {   
  6.         xScroll = document.body.scrollWidth;
  7.         yScroll = window.innerHeight + window.scrollMaxY;
  8.     } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
  9.         xScroll = document.body.scrollWidth;
  10.         yScroll = document.body.scrollHeight;
  11.     } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  12.         xScroll = document.body.offsetWidth;
  13.         yScroll = document.body.offsetHeight;
  14.     }
  15.    
  16.     var windowWidth, windowHeight;
  17.     if (self.innerHeight) {    // all except Explorer
  18.         windowWidth = self.innerWidth;
  19.         windowHeight = self.innerHeight;
  20.     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  21.         windowWidth = document.documentElement.clientWidth;
  22.         windowHeight = document.documentElement.clientHeight;
  23.     } else if (document.body) { // other Explorers
  24.         windowWidth = document.body.clientWidth;
  25.         windowHeight = document.body.clientHeight;
  26.     }   
  27.    
  28.     // for small pages with total height less then height of the viewport
  29.     if(yScroll < windowHeight){
  30.         pageHeight = windowHeight;
  31.     } else { 
  32.         pageHeight = yScroll;
  33.     }
  34.  
  35.     // for small pages with total width less then width of the viewport
  36.     if(xScroll < windowWidth){   
  37.         pageWidth = windowWidth;
  38.     } else {
  39.         pageWidth = xScroll;
  40.     }
  41.  
  42.     arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
  43.     return arrayPageSize;
  44. }

调用:

  1. var getPageSize = getPageSize();
  2. alert(getPageSize[0] + getPageSize[1] + getPageSize[2] + getPageSize[3]);
Tags : , , , , ,
0 位领导批示

文本框textarea限制输入文字个数的方法(2 位领导批示)

  • 2007-12-25
  • 分类：JavaScript
  • 作者：银子
  • 4,898 位领导视察

文本框textarea限制输入文字个数为200个,记录一下解决办法:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<h3>设计理念说明（200字以内）</h3>
<textarea onkeyup="checkLen(this)"></textarea>
<div>您还可以输入 <span id="count">200</span> 个文字</div>
 
<script type="text/javascript">
function checkLen(obj) 
{
	var maxChars = 200;//最多字符数
	if (obj.value.length > maxChars)
	obj.value = obj.value.substring(0,maxChars);
	var curr = maxChars - obj.value.length;
	document.getElementById("count").innerHTML = curr.toString();
}
</script>
Tags : , , ,
2 位领导批示

[JS测试]求某数以内的所有质数(0 位领导批示)

  • 2007-12-19
  • 分类：JavaScript
  • 作者：银子
  • 2,002 位领导视察

论坛上的问题:求某数以内的所有质数.算法方面我实在太差,搜索了下,找到了如下答案

  1. <script type="text/javascript">
  2. function test(num)
  3. {
  4.     var time=new Date();
  5.     a=new Array(2,3,5,7,11,13,17,19,23,29,31,37);
  6.     var sum=0;
  7.     for(x=41;x<num;x+=2)
  8.     {
  9.         if(aa3(x)) a[a.length]=x;
  10.     }
  11.     time=new Date()-time;
  12.     for(i=0;i<a.length;i++)
  13.     {
  14.         sum=sum+a[i];
  15.     }
  16.     alert("质数总和为："+sum+"，共"+a.length+"个,用时"+time+"毫秒");
  17. }
  18.  
  19. function aa3(n)
  20. {
  21.     if(n%3==0) return false;
  22.     var b=a.length;
  23.     for(var y=2;y<b;y++)
  24.     {
  25.         if(n%a[y]==0)return false;
  26.     }
  27.     return true;
  28. }
  29.  
  30. </script>
  31.  
  32. <input id="lolo" value="10000"><input type="button" value="开始" onclick=test(lolo.value)>
Tags :
0 位领导批示

JavaScript OOP练习第一弹(1 位领导批示)

  • 2007-12-10
  • 分类：JavaScript
  • 作者：银子
  • 1,624 位领导视察

学javascript已经有一段时间了,成天与DOM,文档对像打交道,水平停滞不前.今天来进阶练习,学习 javascript OOP　写了一点简单的代码

  1. <script type="text/javascript">
  2. /*定义宠物对像*/
  3. function Pet()
  4. {
  5.     //名称
  6.     this.name = null;
  7.     //毛色
  8.     this.color = null;
  9.     //设置名称
  10.     this.setName = function(newName)
  11.     {
  12.         this.name = newName;
  13.     };
  14.     //获取名称
  15.     this.getName = function()
  16.     {
  17.         return this.name;
  18.     };
  19.     //获取颜色
  20.     this.getColor = function()
  21.     {
  22.         return this.color;
  23.     };
  24.     //设置颜色
  25.     this.setColor = function(newColor)
  26.     {
  27.         this.color = newColor;
  28.     };
  29.     //定义一个要实现的方法
  30.     this.getFood = null;
  31.     //获取宠物对像的描述信息
  32.     this.showPet = function()
  33.     {
  34.         return this.color + "色的" + this.name + "最喜欢吃的食物是" + this.getFood();
  35.     }
  36. }
  37.  
  38. //定义狗狗对像
  39. function Dog() {
  40.     this.getFood = function()
  41.     {
  42.         return "骨头";
  43.     };
  44. }
  45.  
  46. //声明Dog的原型
  47. Dog.prototype = new Pet();
  48. </script>
  49.  
  50. <script type="text/javascript">
  51. //实例化一只名叫koko的黄色小狗
  52. var mydog = new Dog();
  53. //设置koko的属性
  54. mydog.setName("koko");
  55. mydog.setColor("黄");
  56. //输出测试
  57. alert(mydog.showPet());
  58. </script>

第一次学习练习,难免浅显.见笑

Tags : , , ,
1 位领导批示

页面下载速度优化的一点思考(3 位领导批示)

网站首页代码已经达到1000多行,另外17k大小的主css文件与几个内部,外部的js文件(速度主要是内容的N多图片下载及外部的JS文件所拖累的)

所以第一步就是整理所有的JS文件,把整个外部JS代码包含到一个JS文件中,由HTML引用,这样第一次下载后就会在客户端浏览器里缓存,从而加快一定的页面显示速度.

第二步,JS在HTML中的引用位置, 把响应时间长的JS文件放到页面头部，当整个JS文件下载完毕后,整个文档也几乎同时下载完成,与把JS放到页尾的速度感觉上还是提升很大的.

第三步,优化CSS文件,把冗余的代码清除,拆分成两个CSS样式表文件

hx.gif

下载页面整个过程1.08m.进一步优化中.

Tags : , , , , , ,
3 位领导批示

JS判断当前URL对当前链接高亮显示(3 位领导批示)

  • 2007-11-21
  • 分类：JavaScript
  • 作者：银子
  • 1,764 位领导视察

JS判断当前URL对当前链接高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回其它,并与返回其它结果的那个字符串所在元素定义一个class.

Demo:QQDANG

HTML

  1. <div id="nav">
  2. <ul>
  3. <li><a href="http://www.qqdang.net" title="首页">首　页</a></li>
  4. <li><a href="http://www.qqdang.net/smiles-qq-face/index.html" title="搞笑表情">搞笑表情</a></li>
  5. <li><a href="http://www.qqdang.net/emotion-qq-face/index.html" title="情感表情">情感表情</a></li>
  6. <li><a href="http://www.qqdang.net/animal-qq-face/index.html" title="动物表情">动物表情</a></li>
  7. <li><a href="http://www.qqdang.net/person-qq-face/index.html" title="人物表情">人物表情</a></li>
  8. <li><a href="http://www.qqdang.net/holiday-qq-face/index.html" title="节日表情">节日表情</a></li>
  9. <li><a href="http://www.qqdang.net/games-qq-face/index.html" title="游戏表情">游戏表情</a></li>
  10. <li><a href="http://www.qqdang.net/hot-qq-face/index.html" title="热门表情">热门表情</a></li>
  11. <li><a href="http://www.qqdang.net/classics-qq-face/index.html" title="经典表情">经典表情</a></li>
  12. <li><a href="http://www.qqdang.net/special-qq-face/index.html" title="表情专辑">表情专辑</a></li>
  13. <li><a href="http://www.qqdang.net/other-qq-face/index.html" title="其它表情">其它表情</a></li>
  14. </ul>
  15. </div>

JS

  1. var myNav = document.getElementById("nav").getElementsByTagName("a");
  2. for(var i=0;i<myNav.length;i++)
  3. {
  4.     var links = myNav[i].getAttribute("href");
  5.     //alert(links)
  6.     //alert(myNav[i]);
  7.     var myURL = document.location.href;
  8.  
  9.     if(myURL.indexOf(links) != -1)
  10.     {
  11.         myNav[i].className="d";
  12.     }
  13. }
Tags : , ,
3 位领导批示

左右容器高度对齐的JS写法(0 位领导批示)

  • 2007-11-20
  • 分类：JavaScript
  • 作者：银子
  • 1,961 位领导视察

经常会碰到这种情况:左右容器(如DIV)的高度不一定，有可能左边高，有可能右边高。

google了一下，无非就是事先定好一边的高度比另一边的高度要高，这都不是我想要的。

所以自己动手写了一个真正做到未知左右容器高度而使之左右对齐的JS

代码如下：

<script type="text/javascript">
var getLeft = document.getElementById("left");
var getRight = document.getElementById("right");
var leftH = getLeft.scrollHeight;
var rightH = getRight.scrollHeight;
//alert(leftH)
//alert(rightH)
if(leftH > rightH)
{
getRight.style.height = leftH + "px";
}
else if(leftH < rightH)
{
getLeft.style.height = rightH + "px";
}

</script>
Tags : ,
0 位领导批示

JS 给文章所有段落后自动加上链接地址的三种方法(2 位领导批示)

  • 2007-11-17
  • 分类：JavaScript
  • 作者：银子
  • 2,036 位领导视察

论坛上看到的问题

我用DOM方法做了一个

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.test {color:#369;margin-left:18px;}
</style>
</head>
<body>
<p>在看第二个图，如果你全选后准备拷贝这些文字，就会发现在每一段后面都躲了一段字符，而这段字符在“图1”中是隐藏起来的，只有当你选择后才能显现出来。</p>
<p>如上图，这是正常阅读文章的状态，一切显示正常</p>
<p>如上图，这是正常阅读文章的状态，一切显示正常</p>
<script>
function test()
{
var myP = document.getElementsByTagName("p");
for(var i=0;i<myP.length;i++)
{
var createLink = document.createElement("a");
createLink.setAttribute("class","test");
createLink.setAttribute("href","http://www.qqdang.net/blog/");
createLink.setAttribute("target","new");
var createText = document.createTextNode("http://www.qqdang.net/blog/");
createLink.appendChild(createText);
myP[i].appendChild(createLink);
}
}
window.onload = function() {test();}
</script>
</body>
</html>

另外两位板油的答案

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
    <script type="text/javascript">
window.onload=function(){
var brs=document.getElementsByTagName("br");
for(var i=0;i<brs.length;i++){
var txt=document.createTextNode("http://www.hansir.cn");
document.body.insertBefore(txt,brs[i]);
}
}
</script>
 </HEAD>
 <BODY>
 中华人民共和国中华人<br />民共和国中华人民共和国中华人民共和国中华人民共和<br />国中华人民共和国中华人民共和国中华人民共和国<br />中华人民共和国中华人民共和国中华人民共和国中<br />华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国<br />
 </BODY>
</HTML>

用正则的方法，相当简练

<script>
window.onload=function(){
document.body.innerHTML=document.body.innerHTML.replace(/<\/(p|P)>/igm,'<font color="#ffffff">http://www.web0.cn/</font></p>');
}
</script>
<body>
<p>看看~~~</p>
<p>选上看看~~~~~</p>
</body>
Tags : ,
2 位领导批示

随机显示的10篇日志

评论最多的10篇日志

浏览最多的10篇日志