Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • 7.30javascript大会

    post by onelong / 2011-9-3 3:06 Saturday [javascript]

    今年7月30很意外的参加了一个javascript大会,地点是华师附中!大会感触很深的是听周老师说js语法,真的很透彻,虽然曾经自认自己还是js高手,听了他解说后,才知道自己很多地方理解得不对呀!!回来就买了他写的一本书,尽管我很少使用js,但是留给纪念吧!!

    阅读全文>>

  • 如何禁用浏览器的右键菜单

    post by onelong / 2010-11-14 17:28 Sunday [javascript]

    有些时候我们需要自定菜单,假如无法禁用浏览器的右键菜单是无法实现的!不多说了!看下面的代码啦!

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    阅读全文>>

  • 分享:Javascript优化

    post by onelong / 2010-11-4 2:09 Thursday [javascript]

     

    为什么要进行Javascript优化呢?

    优化 JavaScript 性能,使它运行足够快,也就是运行的时间。响应时间当时越短越好啦,但是影响用户体验的响应时间极限那个呢?

    响应时间与用户的体验

    0.1s:用户觉得很流畅

    1.0s:用户的操作可能偶尔受到影响,并且用户已经能感觉到有些不流畅

    10s:对用户的影响比较严重,需要相应的进度提示。用户也会有一些沮丧

    所以我们设计程序的响应最后是控制...

    阅读全文>>

  • 标准模式下scrollTop

    post by onelong / 2010-10-17 6:31 Sunday [javascript]

    在文档<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">下,document.body.scrollTop一直都是0的,那么怎样获取滚动条当前的滚动位...

    阅读全文>>

  • android 中Java和javascript的交互

    post by onelong / 2010-8-31 21:43 Tuesday [android]

    webview提供了接口让javascript访问Java应用程序,WebView.addJavascriptInterface()方法就是实现交互接口的好东西呀!当然也是很危险的!看下面例子:

    //main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout ...

    阅读全文>>

  • 再谈javascript事件模型

    post by onelong / 2010-7-5 18:07 Monday [javascript]

    在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。
    Firefox支持几乎所有的W3C DOM二级标准,和部分W3C DOM三级标准。W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。通常在W3C的DOM二级标准中,event作为发生事件的文档对象的属性。在Firefox下JavaScript函数中获取event的方法:

    1、从调用JavaScript函数的HTML页面显式传递参数event(实参的名称一定要用event) 。

    2、若HTML元素的某个事件上直接绑定(在标签里绑定)了一个函数,则在该函数中可以通过
    event = arguments[0];来获取event对象。如<img src="image.jpg" border="0" onclick="click(event)"/>

    3、间接绑定
    obj.onclick = click;
    function click(evt){
    var event = evt||window.event;
    }
    当然你还可以注册事件
    在DOM二级标准中,为某个元素注册事件处理函数用addEventListener(),移除用removeEventListener()
    在IE中则
    obj.attachEvent (on+ "eventName", funHandler);
    obj.detachEvent (on+ "eventName", funHandler);
    上面onclick="click(event)"中的event是一个变量,怎样接收这个参数呢?回调函数应该像如下编写
    function click(evt){
    var event = evt||window.event;
    }
    在IE中evt是undefined的,但可以通过window.event获取,注意这语句的顺序呀,在ff下window.event是undefined!不过我更主张像如下的写法var event = (evt)?evt:window.event;结构明了!

    更多细节请看http://www.ways2u.com/?post=28

     

  • 体验搜狗云输入法(IE版)

    post by onelong / 2010-1-21 19:17 Thursday [javascript]

    <!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=utf-8" />
    <title>搜狗云输入法</title>
    </head>

    <body>
    <input type="text" />
    <SCRIPT type="text/javascript">
    function mysougoubutton(){
    if(window.event.ctrlKey && window.event.keyCode==89){      //按住Ctrl+y即可打开狗云输入法  
    var n=navigator.userAgent.toLowerCase();ie=n.indexOf('msie')!=-1?1:0;
    if(document.documentMode)ie=0;charset='';
    if(ie)charset=document.charset;src=ie&&charset=='utf-8'?'http://web.pinyin.sogou.com/web_ime/init2_utf8.php':'http://web.pinyin.sogou.com/web_ime/init2.php';
    element=document.createElement('script');
    element.setAttribute('src',src);
    document.body.appendChild(element);    
    }
    }
    document.onkeydown=mysougoubutton;                
    </SCRIPT>
    </body>
    </html>
    打开输入法后你会在浏览器右下角看到

    阅读全文>>

  • javascript怎样获得对象的高度和宽度

    post by onelong / 2010-1-9 15:44 Saturday [javascript]

    document.body.clientHeight  获取的却是body内元素的总高度,而不是浏览器窗体高度
    document.body.clientWidth  获取的却是body内元素的总宽度,而不是浏览器窗体宽度
    document.documentElement.clientHeight 获取可见对象的高度,也是获得浏览器窗体高度
    document.documentElement.clientWidth 获取可见对象的宽度,也是获得浏览器窗体宽度
    document.documentElement.scrollTop 获取浏览器的滚动条的高度,恒为零
    document.documentElement.scrollLeft 获取浏览器的滚动条的宽度
    document.body.scrollHeight 获取的却是body滚动条的总高度
    document.body.scrollWidth 获取的却是body滚动条的总宽度
    obj.offsetHeight 获取对象obj的高度
    obj.offsetWidth 获取对象obj的宽度
    obj.offsetTop
    obj.offsetLeft
    例如:获得浏览器左上角的坐标
    top=document.documentElement.scrollTop;
    left=document.documentElement.scrollLeft;
    例如:获得body左上角的坐标
    top=document.body.scrollTop;
    left=document.body.scrollleft; 
     
    if (document.body && document.body.scrollTop && document.body.scrollLeft)
    {
        top=document.body.scrollTop;
        left=document.body.scrollleft;   
    }
    if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
    {
        top=document.documentElement.scrollTop;
        left=document.documentElement.scrollLeft;
    }

  • javascript去除字符串中所有标点符号和提取纯文本

    post by onelong / 2010-1-1 3:57 Friday [正则表达式]

    用正则表达式除字符串中所有标点符号
    <script language="javascript"> 
     var str="jfkldsjalk,.23@#!$$k~!  @#$%^&*()(_+-=|\{}[]';:,./<>??gg  g~```gf";
      str=str.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g,"");
         alert(str);
    </script>

    阅读全文>>

  • html页面划词翻译api

    post by onelong / 2009-12-30 3:25 Wednesday [javascript]

    最近看到到一个很有意思的功能!里面有一个划词翻译的功能!
    突然觉得那个功能很人性化!百度google一下,哈哈,还真的又发现.......
    下面的是google的划词翻译:
    如何在您的网站上增加划词翻译功能:
    任何网站只要将以下代码放入您的网页就可以为您的站点添加划词翻译的功能
    <script src="http://www.godict.com/script/huaci.js" type="text/javascript"></script>
    <script type="text/javascript">
    dictInit();
    </script>

    用户取词状态开关:
    如果您希望在网页上显示一个用户取词状态开关,则在适当位置放入以下代码(放置在划词翻译代码之前):
    <span id="dict_status"></span>
    效果如下:
    [划词翻译已开启]
    * 如果要默认取词为关闭,只有在点击开启后才打开,可在
    dictInit();
    之前增加代码:
    dict_enable=false;

    这里还有更强大的:dict.cn的划词翻译
    任何网站只要将以下代码放入您的网页就可以为您的站点添加划词翻译的功能
    <script src="http://dict.cn/hc/" type="text/javascript"></script>
    <script type="text/javascript">
    dictInit();
    </script>

    用户取词状态开关:
    如果您希望在网页上显示一个用户取词状态开关,则在适当位置放入以下代码(放置在划词翻译代码之前):
    <span id="dict_status"></span>
    效果如下:
    [划词翻译已禁用]
    * 如果要默认取词为关闭,只有在点击开启后才打开,可在dictInit();之前增加代码:dict_enable=false;
    dict.cn还提供了查词的api
    更多请留意:http://dict.cn/tools.html

  • 兼容ie和firefox的drag

    post by onelong / 2009-12-22 23:23 Tuesday [javascript]

    <html>  
      <head>   
      <style type="text/css">  
      #drag{  
      width:100px;  
      height:20px;  
      background-color:#eee;  
      border:1px solid #333;  
      position:absolute;  
      top:30px;  
      left:200px;  
      text-align:center;  
      cursor:default;  
      }  
      </style>  
      <script type="text/javascript">   
      window.onload=function(){  
      drag(document.getElementById('drag'));  
      };  
      function drag(obj){  
      obj.onmousedown=function(e){  
      var d=document;
      if(!e){
          e=window.event;
          } 
      var x=e.layerX?e.layerX:e.offsetX;
      var y=e.layerY?e.layerY:e.offsetY;
      //layerX和layerY是Netscape的事件属性,表示事件相对于包容图层的X坐标和Y坐标,在IE中它们则是offsetX和offsetY。 
      if(obj.setCapture){  
          obj.setCapture();  
      //setCapture() 和captureEvents()分别是IE和Netscape进行设置事件捕获源的函数,在设置onmousemove和 onmouseup事件处理程序前必须使用,IE的setCapture可以针对某个特定的元件设置事件捕获,而Netscape中只能对整个文档设置,这将会导致一些问题。对应的停止捕捉事件函数为releaseCapture()和captureEvents()。 
      }else if(window.captureEvents){ 
      window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
      }  
       
      obj.onmousemove=function(e){  
      if(!e){e=window.event; }
      if(!e.pageX){e.pageX=e.clientX;}  
      if(!e.pageY){e.pageY=e.clientY;}  // clientX、clientY以及pageX、pageY分别是IE和Netscape中事件发生位置相对于浏览器页面的X坐标和Y坐标
      var tx=e.pageX-x,ty=e.pageY-y;  
      obj.style.left=tx;  
      obj.style.top=ty;  
      };  
       
      obj.onmouseup=function(){  
      if(obj.releaseCapture){  
      obj.releaseCapture();  
      }else if(window.captureEvents){  
      window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}   
      obj.onmousemove=null;  
      obj.onmouseup=null; 
      };  
      };  
      }  
      </script>   
      <body>  
      <div id="drag">drag me<div>  
      </body>  
      </html>
    要拖动的层中包含的是一张图片而不再是文字,这样在IE中仍可以正常拖动,而在FireFox中会发生异常,点下鼠标、拉动、并松开后,层并没有停止拖动,而是跟随着鼠标。
    Netscape的captureEvent()不能捕获某个特定元件的事件,当点下鼠标并拉动时时,FireFox会认为要拖动的对象是层里的图片,该操作无效。 要解决这个问题,只要把图片上的鼠标点下事件设置为无效,在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。

  • firefox下的对象捕捉

    post by onelong / 2009-12-22 23:14 Tuesday [javascript]

    <html>
    <head></head>
    <body>
    <div style="position: absolute; left: 100px; top: 100px; width: 200px; height: 200px; background-color: rgb(255, 221, 238);" onmousedown="beginDrag(this,event);"></div>
    <script type="text/javascript">
        function beginDrag(obj,evt){
            var detlaX = evt.layerX;
            var detlaY = evt.layerY;
            obj.addEventListener("mousemove",move,true);
            obj.addEventListener("mouseup",up,true);
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            function move(evt){
                obj.style.left = evt.clientX - detlaX + "px";
                obj.style.top = evt.clientY - detlaY + "px";
            }
            function up(evt){
                obj.removeEventListener("mousemove",move,true);
                obj.removeEventListener("mouseup",up,true);
                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            }
        }
    </script>
    </body>
    </html>