JavaScript学习(四)

1.this关键字

  在方法内部,this关键字就变成了调用该方法的对象;

  o.m();在m内部,this就是指向 o

 

  在<script>内部写的函数中,使用this,this指向全局对象(因为从本质意义上讲,是全局对象的一个方法而已)

 

 

2.原型对象(继承的根基)

 

每个对象都继承原型对象的所有属性。

 

对象属性的读取:先读对象本身的属性,如果没有再读其原型的属性,如果在原型中也没有找到,即未定义

对象属性的赋值:只会设置对象本身的属性,不会去设置原型的属性。

 

使用原型,可以为对象动态的添加属性

 

3.模仿Java的类机制

 

// We begin with the constructor
function Circle(radius) {
    // r is an instance property, defined and initialized in the constructor.
    this.r = radius;
}

// Circle.PI is a class propertyit is a property of the constructor function.
Circle.PI = 3.14159;

// Here is an instance method that computes a circle's area.
Circle.prototype.area = function( ) { return Circle.PI * this.r * this.r; }

// This class method takes two Circle objects and returns the
// one that has the larger radius.
Circle.max = function(a,b) {
    if (a.r > b.r) return a;
    else return b;
}

// Here is some code that uses each of these fields:
var c = new Circle(1.0);      // Create an instance of the Circle class
c.r = 2.2;                    // Set the r instance property
var a = c.area( );             // Invoke the area( ) instance method
var x = Math.exp(Circle.PI);  // Use the PI class property in our own computation
var d = new Circle(1.2);      // Create another Circle instance
var bigger = Circle.max(c,d); // Use the max( ) class method

 

 

4.对象的属性和方法

 

constructor属性:引用的是构造函数,这个属性是由原型对象中继承而来的。

但是并不能保证constructor属性总是存在,因为此原型对象的属性引用可以替换;JavaScript1.1中是只读的,后来改成可写的了,不知道什么原因。

 

if ((typeof o == "object") && (o.constructor == Date))
    // Then do something with the Date object...

 

 

也可用instanceof来实现上面的功能:

 

if ((typeof o == "object") && (o instanceof Date))
    // Then do something with the Date object...

 

 

 

JS实现request.getParameter的方法

js 代码
  1. var PARAMTER_VALUE = null;   
  2. function getParamter(paramName) {   
  3.     if(!PARAMTER_VALUE) {   //第一次初始化   
  4.         PARAMTER_VALUE = new Array();   
  5.         var paramStr = location.search.substring(1);   
  6.         var paramArr = paramStr.split(“&”);   
  7.         var len = paramArr.length;   
  8.         var tempArr;   
  9.         for(var i = 0; i < len; i++) {   
  10.             tempArr = paramArr[i].split(“=”);   
  11.             PARAMTER_VALUE[tempArr[0]] = tempArr[1];   
  12.         }   
  13.     }   
  14.     var paramValue = PARAMTER_VALUE[paramName];   
  15.     if(paramValue) {   
  16.         return paramValue;   
  17.     }   
  18. }  

今天遇到这样一个需求,不知道还有没有其他更好的实现方法?

扩展数组的remove方法

var array = [“one”, “two”,”three”,”four”];  

//数组中现在的内容为:  

//one,two,three,four  

//array.length == 4  

delete array[2];

数组结果:

one, two, undefined, four

//array.length == 4

可以看到,delete只是将数组array的第三个位置上的元素删掉了,可是数组的长度没有改变,显然这个不是我们想要的结果,不过我们可以借助数组对象自身的slice

方法来做到。一个比较好的实现,是来自于jQuery的设计者John Resig:

//Array Remove – By John Resig (MIT Licensed)  

Array.prototype.remove = function(from, to) {  

    var rest = this.slice((to || from) + 1 || this.length);  

    this.length = from < 0   this.length + from : from;  

    return this.push.apply(this, rest);  

};

这个函数扩展了JavaScript的内置对象Array,这样,我们以后的所有声明的数组都会自动的拥有remove能力,我们来看看这个方法的用法:

var array = [“one”, “two”, “three”, “four”, “five”, “six”];  

print(array);  

array.remove(0);//删除第一个元素  

print(array);  

array.remove(-1);//删除倒数第一个元素  

print(array);  

array.remove(0,2);//删除数组中下标为0-2的元素(3个)  

print(array);

得到结果:

one,two,three,four,five,six

two,three,four,five,six

two,three,four,five

five

也就是说,remove接受两个参数,第一个参数为起始下标,第二个参数为结束下标,其中第二个参数可以忽略,这种情况下会删除指定下标的元素。当然,不是每个人

都希望影响整个原型链(原因在下一个小节里讨论),因此可以考虑另一种方式:

//Array Remove – By John Resig (MIT Licensed)  

Array.remove = function(array, from, to) {  

    var rest = array.slice((to || from) + 1 || array.length);  

    array.length = from < 0   array.length + from : from;  

    return array.push.apply(array, rest);  

};

其操作方式与前者并无二致,但是不影响全局对象,代价是你需要显式的传递需要操作的数组作为第一个参数:

var array = [“one”, “two”, “three”, “four”, “five”, “six”];  

Array.remove(array, 0, 2);//删除0, 1, 2三个元素  

print(array); 

这种方式,相当于给JavaScript内置的Array添加了一个静态方法。

常用正则表达式

1。^\d+$  //匹配非负整数(正整数 + 0)

2。^[0-9]*[1-9][0-9]*$  //匹配正整数

3。^((-\d+) |(0+))$  //匹配非正整数(负整数 + 0)

4。^-[0-9]*[1-9][0-9]*$  //匹配负整数

5。^- \d+$    //匹配整数

6。^\d+(\.\d+) $  //匹配非负浮点数(正浮点数 + 0)

7。^(([0-9]+\.[0-9]*[1-9][0-9]*) |([0-9]*[1-9][0-9]*\.[0-9]+) |([0-9]*[1-9][0-9]*))$  //匹配正浮点数

8。^((-\d+(\.\d+) ) |(0+(\.0+) ))$  //匹配非正浮点数(负浮点数 + 0)

9。^(-(([0-9]+\.[0-9]*[1-9][0-9]*) |([0-9]*[1-9][0-9]*\.[0-9]+) |([0-9]*[1-9][0-9]*)))$  //匹配负浮点数

10。^(- \d+)(\.\d+) $  //匹配浮点数

11。^[A-Za-z]+$  //匹配由26个英文字母组成的字符串

12。^[A-Z]+$  //匹配由26个英文字母的大写组成的字符串

13。^[a-z]+$  //匹配由26个英文字母的小写组成的字符串

14。^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串

15。^\w+$  //匹配由数字、26个英文字母或者下划线组成的字符串

16。^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$    //匹配email地址

17。^[a-zA-z]+://匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\ \S*) $  //匹配url

18。匹配中文字符的正则表达式: [\u4e00-\u9fa5]

19。匹配双字节字符(包括汉字在内):[^\x00-\xff]

20。应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,”aa”).length;}

21。匹配空行的正则表达式:\n[\s | ]*\r

21。匹配空行的正则表达式:/^\s*$/m



22。匹配HTML标记的正则表达式:/ <(.*)>.* <\/\1> | <(.*)\/>/


22。匹配HTML标记的正则表达式:/ <([^>]+)>[^ <>]* <\/\1> | <([^>]+)\/>/

这个实际上作用不大,因为正则表达式不能支持嵌套匹配,仅 .NET 的表达式引擎有这个功能。

23。匹配首尾空格的正则表达式:(^\s*) |(\s*$)

23。匹配首尾空格的正则表达式:^\s+ |\s+$

    为 JavaScript 的 String 增加 trim() 函数:

    String.prototype.trim = function() {

      return this.replace(/^\s+/, ”).replace(/\s+$/, ”);

  }

* 正则表达式用例

  * 1、^\S+[a-z A-Z]$ 不能为空 不能有空格  只能是英文字母

  * 2、\S{6,}        不能为空 六位以上

  * 3、^\d+$          不能有空格 不能非数字

* 4、(.*)(\.jpg |\.bmp)$ 只能是jpg和bmp格式

* 4、([^.]+)\.(jpg &brvbarbmp) 只能是jpg和bmp格式

  * 5、^\d{4}\-\d{1,2}-\d{1,2}$ 只能是2004-10-22格式

  * 6、^0$            至少选一项

  * 7、^0{2,}$        至少选两项

* 8、^[\s |\S]{20,}$ 不能为空 二十字以上

* 8、^\S{20,}$ 不能为空 二十字以上

  * 9、^\+ [a-z0-9](([-+.] |[_]+) [a-z0-9]+)*@([a-z0-9]+(\. |\-))+[a-z]{2,6}$邮件

  * 10、\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*([,;]\s*\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)* 输入多个地址用逗号或空格分隔邮件

  * 11、^(\([0-9]+\)) [0-9]{7,8}$电话号码7位或8位或前面有区号例如(022)87341628

  * 12、^[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+(\,[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+)*$

  *    只能是字母、数字、下划线;必须有@和.同时格式要规范 邮件

  * 13 ^\w+@\w+(\.\w+)+(\,\w+@\w+(\.\w+)+)*$上面表达式也可以写成这样子,更精练。

    14  ^\w+((-\w+) |(\.\w+))*\@\w+((\. &brvbar-)\w+)*\.\w+$

prototype指南

<iframe align=”top” marginwidth=”0″ marginheight=”0″ src=”http://www.zealware.com/csdnblog01.html” frameborder=”0″ width=”728″ scrolling=”no” height=”90″></iframe>

如果你在做web开发,并且发现javascript愈加成为完美的客户端不可缺少的部分,那么你应该看看一下这篇指南,了解prototype以及它能为你做些什么。

http://particletree.com/features/quick-guide-to-prototype/

Trackback: http://tb.blog.csdn.net/TrackBack.aspx PostId=545490

js日期加减

<script type=”text/javascript”>
    Date.prototype.Format = function(fmt)
{
    //author: meizz
    var o =
     {
        “M+” : this.getMonth() + 1, //月份
        “d+” : this.getDate(), //日
        “h+” : this.getHours(), //小时
        “m+” : this.getMinutes(), //分
        “s+” : this.getSeconds(), //秒
        “q+” : Math.floor((this.getMonth() + 3) / 3), //季度
        “S” : this.getMilliseconds() //毫秒
     };
    if (/(y+)/.test(fmt))
         fmt = fmt.replace(RegExp.$1, (this.getFullYear() + “”).substr(4 – RegExp.$1.length));
    for (var k in o)
        if (new RegExp(“(” + k + “)”).test(fmt))
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1)   (o[k]) : ((“00” + o[k]).substr((“” + o[k]).length)));
    return fmt;
}

Date.prototype.addDays = function(d)
{
    this.setDate(this.getDate() + d);
};

Date.prototype.addWeeks = function(w)
{
    this.addDays(w * 7);
};

Date.prototype.addMonths= function(m)
{
    var d = this.getDate();
    this.setMonth(this.getMonth() + m);

    if (this.getDate() < d)
        this.setDate(0);
};

Date.prototype.addYears = function(y)
{
    var m = this.getMonth();
    this.setFullYear(this.getFullYear() + y);

    if (m < this.getMonth())
     {
        this.setDate(0);
     }
};

var now = new Date();
now.addDays(1);//加减日期操作
alert(now.Format(“yyyy-MM-dd”));
</script>

JavaScript类和继承:constructor属性

constructor属性始终指向创建当前对象的构造函数。比如下面例子:

  1. // 等价于 var foo = new Array(1, 56, 34, 12); 
  2. var arr = [1, 56, 34, 12]; 
  3. console.log(arr.constructor === Array); // true 
  4. // 等价于 var foo = new Function(); 
  5. var Foo = function() { }; 
  6. console.log(Foo.constructor === Function); // true 
  7. // 由构造函数实例化一个obj对象 
  8. var obj = new Foo(); 
  9. console.log(obj.constructor === Foo); // true 
  10. // 将上面两段代码合起来,就得到下面的结论 
  11. console.log(obj.constructor.constructor === Function); //
    true

复制代码

但是当constructor遇到prototype时,有趣的事情就发生了。

我们知道每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数。如下例所示:

  1. function Person(name) { 
  2.   this.name = name;  
  3. }; 
  4. Person.prototype.getName = function() { 
  5.   return this.name;  
  6. }; 
  7. var p = new Person(“ZhangSan”); 
  8. console.log(p.constructor === Person); // true  
  9. console.log(Person.prototype.constructor === Person); // true 
  10. // 将上两行代码合并就得到如下结果 
  11. console.log(p.constructor.prototype.constructor === Person); //
    true

复制代码

当时当我们重新定义函数的prototype时(注意:和上例的区别,这里不是修改而是覆盖),constructor属性的行为就有点奇怪了,如下示例:

  1. function Person(name) { 
  2.   this.name = name;  
  3. }; 
  4. Person.prototype = { 
  5.   getName: function() {  
  6.       return this.name;  
  7.   }  
  8. }; 
  9. var p = new Person(“ZhangSan”); 
  10. console.log(p.constructor === Person); // false  
  11. console.log(Person.prototype.constructor === Person); // false 
  12. console.log(p.constructor.prototype.constructor === Person); //
    false


为什么呢?

原来是因为覆盖Person.prototype时,等价于进行如下代码操作:

  1. Person.prototype = new Object({ 
  2.   getName: function() {  
  3.       return this.name;  
  4.   }  
  5. });


而constructor属性始终指向创建自身的构造函数,所以此时Person.prototype.constructor
=== Object,即是:

  1. function Person(name) { 
  2.   this.name = name;  
  3. }; 
  4. Person.prototype = { 
  5.   getName: function() {  
  6.       return this.name;  
  7.   }  
  8. }; 
  9. var p = new Person(“ZhangSan”); 
  10. console.log(p.constructor === Object); // true  
  11. console.log(Person.prototype.constructor === Object); // true 
  12. console.log(p.constructor.prototype.constructor === Object); //
    true


怎么修正这种问题
呢?方法也很简单,重新覆盖Person.prototype.constructor即可:

  1. function Person(name) { 
  2.   this.name = name;  
  3. }; 
  4. Person.prototype = new Object({ 
  5.   getName: function() {  
  6.       return this.name;  
  7.   }  
  8. }); 
  9. Person.prototype.constructor = Person; 
  10. var p = new Person(“ZhangSan”); 
  11. console.log(p.constructor === Person); // true  
  12. console.log(Person.prototype.constructor === Person); // true 
  13. console.log(p.constructor.prototype.constructor === Person); //
    true

javascripttoJson

Object.prototype.deep_clone = function(){   
     eval("var tmp = " + this.toJSON());   
    return tmp;   
}   
Object.prototype.toJSON = function(){   
     var json = [];   
    for(var i in this){   
        if(!this.hasOwnProperty(i)) continue;   
        //if(typeof this[i] == "function") continue;   
         json.push(   
             i.toJSON() + " : " +   
             ((this[i] != null)   this[i].toJSON() : "null")   
         )   
     }   
    return "{\n " + json.join(",\n ") + "\n}";   
}   
Array.prototype.toJSON = function(){   
    for(var i=0,json=[];i<this.length;i++)   
         json[i] = (this[i] != null)   this[i].toJSON() : "null";   
    return "["+json.join(", ")+"]"  
}   
  
String.prototype.toJSON = function(){   
    return '"' +   
        this.replace(/(\\|\")/g,"\\$1")   
         .replace(/\n|\r|\t/g,function(){   
             var a = arguments[0];   
            return   (a == '\n')   '\\n':   
                     (a == '\r')   '\\r':   
                     (a == '\t')   '\\t': ""  
         }) +   
        '"'  
}   
Boolean.prototype.toJSON = function(){return this}   
Function.prototype.toJSON = function(){return this}   
Number.prototype.toJSON = function(){return this}   
RegExp.prototype.toJSON = function(){return this}   
  
// strict but slow   
String.prototype.toJSON = function(){   
     var tmp = this.split("");   
    for(var i=0;i<tmp.length;i++){   
         var c = tmp[i];   
         (c >= ' ')     
             (c == '\\')   (tmp[i] = '\\\\'):   
             (c == '"')     (tmp[i] = '\\"' ): 0 :   
         (tmp[i] =   
             (c == '\n')   '\\n' :   
             (c == '\r')   '\\r' :   
             (c == '\t')   '\\t' :   
             (c == '\b')   '\\b' :   
             (c == '\f')   '\\f' :   
             (c = c.charCodeAt(),('\\u00' + ((c>15) 1:0)+(c%16)))   
         )   
     }   
    return '"' + tmp.join("") + '"';   
}  

 

javascript学习

0.链接css文件和js文件    
<link rel="stylesheet" href="../css/style.css" type="text/css">    
<script language="javascript" src="../includes/jslib.js" ></script> 

1.关闭输入法    
   
 <input style="ime-mode:disabled"> 

2.光标是停在文本框文字的最后    
   
<script language="javascript">    
function cc()    
{    
   var e = event.srcElement;    
   var r =e.createTextRange();    
   r.moveStart('character',e.value.length);    
   r.collapse(true);    
   r.select();    
}    
</script>    
<input type=text name=text1 value="123" onfocus="cc()">   

 3.最小化、最大化、关闭窗口    
   
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">    
<param name="Command" value="Minimize"></object>    
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">    
<param name="Command" value="Maximize"></object>    
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">    
<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    

4. 检查一段字符串是否全由数字组成    
   
<script language="Javascript">
<!--    
function checkNum(str){return str.match(/\D/)==null}    
// -->
</script>   

5. 获得一个窗口的大小    
   
document.body.clientWidth,document.body.clientHeight

6. 各种样式的光标    
   
auto :标准光标    
default :标准箭头    
hand :手形光标    
wait :等待光标    
text :I形光标    
vertical-text :水平I形光标    
no-drop :不可拖动光标    
not-allowed :无效光标    
help : 帮助光标    
all-scroll :三角方向标    
move :移动标    
crosshair :十字标    
e-resize    
n-resize    
nw-resize    
w-resize    
s-resize    
se-resize    
sw-resize  

7.让TEXTAREA自适应文字的行数    
   
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

8. 日期减去天数等于第二个日期    
<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)    
</script>

9.ENTER键可以让光标移到下一个输入框    
   
<input onkeydown="if(event.keyCode==13)event.keyCode=9">    


10.常用的正则表达式    
   
匹配中文字符的正则表达式: [\u4e00-\u9fa5]    
匹配双字节字符(包括汉字在内):[^\x00-\xff]    
匹配空行的正则表达式:\n[\s| ]*\r    
匹配HTML标记的正则表达式:/<(.*)>.*<\/\1>|<(.*) \/>/    
匹配首尾空格的正则表达式:(^\s*)|(\s*$)    
匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*    
匹配网址URL的正则表达式:http://([\w-]+\.)+[\w-]+(/[\w- ./ %&=]*)     
   
(1)应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)            
    String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}    
   
(2)应用:javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现    
   String.prototype.trim = function()    
   {    
      return this.replace(/(^\s*)|(\s*$)/g, "");    
   }    
(3)应用:利用正则表达式分解和转换IP地址    
   function IP2V(ip) //IP地址转换成对应数值    
   {    
      re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式    
      if(re.test(ip))    
      {    
         return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1    
      }    
      else   
      {    
         throw new Error("Not a valid IP address!")    
      }    
   }    
(4)应用:从URL地址中提取文件名的javascript程序    
   s="http://www.9499.net/page1.htm";    
   s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2") ; //Page1.htm    
(5)应用:利用正则表达式限制网页表单里的文本框输入内容    
   用正则表达式限制只能输入中文:onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"   
   用正则表达式限制只能输入全角字符: onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"   
   用正则表达式限制只能输入数字:onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"   
   用正则表达式限制只能输入数字和英文:onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" 


11.判断是否是整数    
function IsNum(s)  //整数    
{    
   if(s=="null"||s=="undefined"||s.length<1)    
      return false;    
   if(isNaN(parseInt(s)))    
      return false;    
   else   
   if((parseInt(s)+"").length!=s.length)    
      return false;    
   else   
      return true;    
}    
   
function IsNumber(JudgeNum){  //判断大于0的数    
   var JudgeStr=JudgeNum.toString();    
   for (var i=0;i<JudgeStr.length;i++) {    
      var oneChar=JudgeStr.charAt(i);    
   
      if (oneChar<"0" || oneChar >"9"){    
         return false;    
      }    
   }    
   return true;    
}  


12.打开没有最大化按钮的窗口    
window.open("http://www.google.com","","width=250,height=220,scrollbars=no,resizable=no,center=yes");    

13.层的隐藏与显示    
   
   只要设置层的style的display属性即可。 
   比如<div style="display:none" id="divTest">隐藏的层</div>    
   如果要显示它可以通过脚本来控制。例如divTest.style.display = "";  
   或者  window.document.getElementById("MyDiv").style.display = "";  


14.禁止右键    
   
<body oncontextmenu="return false"> 


15.得到当前显示器的分辨率    
   
window.srceen.width 得到屏幕的宽度    
window.srceen.height 得到屏幕的高度   

16.定时运行特定代码    
   
setTimeout(Code,Timeout);   是从现在算起多少微秒后运行该代码(只运行一次)    
setInterval(Code,Timeout);  是每隔多少微秒运行一次代码    
Code是一段字符串,里边是js代码,Timeout是时间间隔,单位是微秒    
   
<input name="txtTimer" value="10秒">    
<SCRIPT LANGUAGE="javascript">    
<!--    
    waitTime=10000; //10 秒    
    timer=setInterval("OnTimer()",1000);    
   
    function OnTimer(){    
        waitTime=waitTime-1000;    
        if(waitTime==0){    
            window.close();    
        }    
        txtTimer.value=waitTime/1000+"秒";    
    }    
//-->    
</SCRIPT>  

17.得到本页网址    
   
var Url = window.location.href; 


18.IE地址栏前换成自己的图标
 <link rel="Shortcut Icon" href="favicon.ico"> 



Flash页面技术解密

前天微软更新了IE浏览器,针对IE的更新,使ActiveX内容不能自载入的问题引起了许多人的关注.这些改变可以在Adobe的某些软件中看到,包括flashplayer.Authorware player, shockwave Player, SVG Viewer,Help Center 和 Adobe Reader,当然还有 Sun Java, Apple QuickTime, RealNetworks,RealPlayer和其它的ActiveX .通过某些方法嵌入到html页面中的交互内容可能不能响应用户的输入(例如,键盘,鼠标)直到用户点击要么激活要么继续loading .下面我的看看它到底是怎么一回事,并怎样解决它来使用户最大限度的方便浏览.

问题

当你查看web页面时,windows下的IE浏览器会将ActiveX内容显不为一个矩形框和一个提示内容为”Click to activate and use this control”意思就是你需要激活ActiveX的内容才可以查看或交互控制,ActiveX内容可能或不能象你预想的那样载入并进行播放. 可以查看Adobe提供的演示:这里

Adobe的解决方案

有如下两种解决方法:

方法1
如果你浏览了包含ActiveX的页面.点击这个内容激活它.

方法2
如果你正在开发一个网站,移除针对ActiveX内容所需的用户激活过程.针对此Adobe提供了一份基于javascriptr 解决文档.这里
通过使用Adobe的解决文档可以解决上述问题.

那么除了上述方法之外还有没有其它更简单的方法呢,答案是肯定的.可以使用deconcept 的flashObject 相比而言会比使用Adobe的方法更简单一些.并且运行状况是良好的.这里下载Download FlashObject 1.3 (38 hits)

基本方法如下:

只需要将flashobject.js 包含在你的html页面内,然后加上一点javascript代码嵌入flash swf就ok了.
它的工作方式如下:

代码: 

<script type=”text/javascript” src=”flashobject.js”></script>

<div id=”flashcontent”>
This text is replaced by the Flash movie.
</div>

<script type=”text/javascript”>
var fo = new FlashObject(“movie.swf”, “mymovie”, “200”, “100”, “7”, “#336699”);
fo.write(“flashcontent”);
</script>

简单分析一下,或是你可以仔细看flashObject的文档

代码: 

<div id=”flashcontent”>
This text is replaced by the Flash movie.
</div>

这一段相当于我们在为放置flash文件而准备的一个holder.有些象我们常用的空的MovieClip holder.为放入内容而准备的.如果你没有装flashplayer.那么里面的那行字会显示出来如显示为”This text is replaced by the Flash movie.”
如果你装了flashplayer,那这行字是不会显示的,用户基本上是看不到的,同时它还有一个好处是你可以把这行内容变成的你搜索关键字,google会很容易搜到它的.呵呵,一举两得.
下面这段一看就知道是什么了.

代码: 

<script type=”text/javascript”>
var fo = new FlashObject(“movie.swf”, “mymovie”, “200”, “100”, “7”, “#336699”);
fo.write(“flashcontent”);
</script>

用来嵌入swf,比如当前的影片文件是”movie.swf”, id是”mymoive,宽是200,高是100,flashplayer版本是7,背景色是#336699.

下面我们来看一下我们嵌入一个flash的范例.
根据上面的基本工作方式,我们还要嵌入一些其它的参数.来满足我们一些其它的需要比如我们有一个文件名为ws.swf,我们想把它嵌入到页面中,又不至于受IE更新的影响.

1.在页面中包入flashobject.js文件

<script type=”text/javascript” src=”flashobject.js”></script>

一般这行代码可以写在body标签之前即可.

2.把下面这段代码加在它下方.

代码:

<div id=”flashcontent” style=”width: 300px; height: 200px”></div>
<script type=”text/javascript”>
   var fo = new FlashObject(“ws.swf”, “mymovie”, “300”, “200px”, “7”, “#336699”);
   fo.addParam(“quality”, “low”);
   fo.addParam(“wmode”, “transparent”);
   fo.addParam(“salign”, “t”);
   fo.addParam(“scale”, “noscale”);
fo.addParam(“loop”, “false”);
   fo.write(“flashcontent”);
</script>

从上面的代码中我们看出,我们将要把FLASH放在id为flashcontent层中,它的宽为300高为200像素,那么应是和我们的swf文件的大小是相同的.如果你想缩放也可以是不同的.下面var fo = new FlashObject(“ws.swf”, “mymovie”, “300”, “200px”, “7”, “#336699”); 是嵌入flash文件,在之前的内容已介绍过它里面的参数,其中的ws.swf可以是相对路径也可以是绝对路径,如你可以直接输入网站加上你的swf文件名字.
在下面的一段就是我们可以加入的参数,从上到下分别为quality质量,wmode transparent透明,salign对齐,scale缩放,loop循环等.
这样我们的嵌入过程就完成了.

如果你想使用flashVars来进行html与flash之前的通讯,使用flashobject也是很容易的,但有一点使用flashobjcet时只有在swf刚一载入时传递参数.并且是以值对的形式来传递,如下:variable1=value1&variable2=value2&variable3=value3

使用方法如下:

代码:

<script type=”text/javascript”>
   var fo = new FlashObject(“movie.swf”, “mymovie”, “200”, “100”, “7”, “#336699”);
   fo.addVariable(“variable1”, “value1”);
   fo.addVariable(“variable2”, “value2”);
   fo.addVariable(“variable3”, “value3”);
   fo.write(“flashcontent”);
</script>

一旦这一步完成,那么所有的变量就已经传入到flash,你就可以灵活的在你的flash中的_root上使用了.

deconcept flashObject 还提供了可以加入其它参数的说明.你可以详细查看

除了这种简单方法之外,这还有一个与之类似的,我并没有仔细看,如果你有兴趣可以仔细看一下.这里ufo

哈哈,针对微软IE的更新改变,我们已经能轻松的去掉必须要点击一下才能看的过程了.如果你有空不要忘了去微软网站上看一下,它用的是什么,最后,不要忘了更新你网站,Cheers  🙂

 

附:flashobject.js的内容

 

/**
 * FlashObject v1.3d: Flash detection and embed – http://blog.deconcept.com/flashobject/
 *
 * FlashObject is (c) 2006 Geoff Stearns and is released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 */
if(typeof com==”undefined”){var com=new Object();}
if(typeof com.deconcept==”undefined”){com.deconcept=new Object();}
if(typeof com.deconcept.util==”undefined”){com.deconcept.util=new Object();}
if(typeof com.deconcept.FlashObjectUtil==”undefined”){com.deconcept.FlashObjectUtil=new Object();}
com.deconcept.FlashObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a,_b){
if(!document.createElement||!document.getElementById){return;}
this.DETECT_KEY=_b _b:”detectflash”;
this.skipDetect=com.deconcept.util.getRequestParameter(this.DETECT_KEY);
this.params=new Object();
this.variables=new Object();
this.attributes=new Array();
this.useExpressInstall=_7;
if(_1){this.setAttribute(“swf”,_1);}
if(id){this.setAttribute(“id”,id);}
if(w){this.setAttribute(“width”,w);}
if(h){this.setAttribute(“height”,h);}
if(_5){this.setAttribute(“version”,new com.deconcept.PlayerVersion(_5.toString().split(“.”)));}
this.installedVer=com.deconcept.FlashObjectUtil.getPlayerVersion(this.getAttribute(“version”),_7);
if(c){this.addParam(“bgcolor”,c);}
var q=_8 _8:”high”;
this.addParam(“quality”,q);
var _d=(_9) _9:window.location;
this.setAttribute(“xiRedirectUrl”,_d);
this.setAttribute(“redirectUrl”,””);
if(_a){this.setAttribute(“redirectUrl”,_a);}
};
com.deconcept.FlashObject.prototype={setAttribute:function(_e,_f){
this.attributes[_e]=_f;
},getAttribute:function(_10){
return this.attributes[_10];
},addParam:function(_11,_12){
this.params[_11]=_12;
},getParams:function(){
return this.params;
},addVariable:function(_13,_14){
this.variables[_13]=_14;
},getVariable:function(_15){
return this.variables[_15];
},getVariables:function(){
return this.variables;
},createParamTag:function(n,v){
var p=document.createElement(“param”);
p.setAttribute(“name”,n);
p.setAttribute(“value”,v);
return p;
},getVariablePairs:function(){
var _19=new Array();
var key;
var _1b=this.getVariables();
for(key in _1b){_19.push(key+”=”+_1b[key]);}
return _19;
},getFlashHTML:function(){
var _1c=””;
if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){
if(this.getAttribute(“doExpressInstall”)){
this.addVariable(“MMplayerType”,”PlugIn”);
}
_1c=”<embed type=\”application/x-shockwave-flash\” src=\””+this.getAttribute(“swf”)+”\” width=\””+this.getAttribute(“width”)+”\” height=\””+this.getAttribute(“height”)+”\””;
_1c+=” id=\””+this.getAttribute(“id”)+”\” name=\””+this.getAttribute(“id”)+”\” “;
var _1d=this.getParams();
for(var key in _1d){_1c+=[key]+”=\””+_1d[key]+”\” “;}
var _1f=this.getVariablePairs().join(“&”);
if(_1f.length>0){_1c+=”flashvars=\””+_1f+”\””;}
_1c+=”/>”;
}else{
if(this.getAttribute(“doExpressInstall”)){this.addVariable(“MMplayerType”,”ActiveX”);}
_1c=”<object id=\””+this.getAttribute(“id”)+”\” classid=\”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\” width=\””+this.getAttribute(“width”)+”\” height=\””+this.getAttribute(“height”)+”\”>”;
_1c+=”<param name=\”movie\” value=\””+this.getAttribute(“swf”)+”\” />”;
var _20=this.getParams();
for(var key in _20){_1c+=”<param name=\””+key+”\” value=\””+_20[key]+”\” />”;}
var _22=this.getVariablePairs().join(“&”);
if(_22.length>0){_1c+=”<param name=\”flashvars\” value=\””+_22+”\” />”;
}_1c+=”</object>”;}
return _1c;
},write:function(_23){
if(this.useExpressInstall){
var _24=new com.deconcept.PlayerVersion([6,0,65]);
if(this.installedVer.versionIsValid(_24)&&!this.installedVer.versionIsValid(this.getAttribute(“version”))){
this.setAttribute(“doExpressInstall”,true);
this.addVariable(“MMredirectURL”,escape(this.getAttribute(“xiRedirectUrl”)));
document.title=document.title.slice(0,47)+” – Flash Player Installation”;
this.addVariable(“MMdoctitle”,document.title);}
}else{this.setAttribute(“doExpressInstall”,false);}
if(this.skipDetect||this.getAttribute(“doExpressInstall”)||this.installedVer.versionIsValid(this.getAttribute(“version”))){
var n=(typeof _23==”string”) document.getElementById(_23):_23;
n.innerHTML=this.getFlashHTML();
}else{if(this.getAttribute(“redirectUrl”)!=””){document.location.replace(this.getAttribute(“redirectUrl”));}}}};
com.deconcept.FlashObjectUtil.getPlayerVersion=function(_26,_27){
var _28=new com.deconcept.PlayerVersion(0,0,0);
if(navigator.plugins&&navigator.mimeTypes.length){
var x=navigator.plugins[“Shockwave Flash”];
if(x&&x.description){_28=new com.deconcept.PlayerVersion(x.description.replace(/([a-z]|[A-Z]|\s)+/,””).replace(/(\s+r|\s+b[0-9]+)/,”.”).split(“.”));}
}else{
try{var axo=new ActiveXObject(“ShockwaveFlash.ShockwaveFlash”);
for(var i=3;axo!=null;i++){
axo=new ActiveXObject(“ShockwaveFlash.ShockwaveFlash.”+i);
_28=new com.deconcept.PlayerVersion([i,0,0]);}}
catch(e){}
if(_26&&_28.major>_26.major){return _28;}
if(!_26||((_26.minor!=0||_26.rev!=0)&&_28.major==_26.major)||_28.major!=6||_27){
try{
_28=new com.deconcept.PlayerVersion(axo.GetVariable(“$version”).split(” “)[1].split(“,”));
}catch(e){}}}
return _28;
};
com.deconcept.PlayerVersion=function(_2c){
this.major=parseInt(_2c[0])||0;
this.minor=parseInt(_2c[1])||0;
this.rev=parseInt(_2c[2])||0;
};
com.deconcept.PlayerVersion.prototype.versionIsValid=function(fv){
if(this.major<fv.major){return false;}
if(this.major>fv.major){return true;}
if(this.minor<fv.minor){return false;}
if(this.minor>fv.minor){return true;}
if(this.rev<fv.rev){return false;}
return true;
};
com.deconcept.util={getRequestParameter:function(_2e){
var q=document.location.search||document.location.hash;
if(q){var _30=q.indexOf(_2e+”=”);
var _31=(q.indexOf(“&”,_30)>-1) q.indexOf(“&”,_30):q.length;
if(q.length>1&&_30>-1){
return q.substring(q.indexOf(“=”,_30)+1,_31);}}return “”;
},removeChildren:function(n){
while(n.hasChildNodes()){
n.removeChild(n.firstChild);}}};
if(Array.prototype.push==null){
Array.prototype.push=function(_33){
this[this.length]=_33;
return this.length;};}
var getQueryParamValue=com.deconcept.util.getRequestParameter;
var FlashObject=com.deconcept.FlashObject;

另外提供了:Flash版本检测

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>FlashObject embed by Geoff Stearns (show player version) @ deconcept</title>
<!– FlashObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/ –>
<script type=”text/javascript” src=”flashobject.js”></script>
<style type=”text/css”>
 
 body {
  background-color: #eeeeee;
  font: .8em/1em verdana,arial,helvetica,sans-serif;
 }

 #info {
  width: 600px;
  overflow: auto;
 }

</style>
</head>
<body>

 <div id=”flashversion”>
  You do not have the Flash plugin installed, or your browser does not support Javascript (you should enable it, perhaps )
 </div>
  <script type=”text/javascript”>
   // <![CDATA[
    
    var version = com.deconcept.FlashObjectUtil.getPlayerVersion();
    if (document.getElementById && (version[‘major’] > 0)) {
     document.getElementById(‘flashversion’).innerHTML = “You have Flash player “+ version[‘major’] +”.”+ version[‘minor’] +”.”+ version[‘rev’] +” installed.”;
    }

   // ]]>
  </script>

 <div id=”info”>
  <p>
  This page displays your current Flash player version using Javascript.
  </p>
 </div> 
</body>
</html>