`
xo_tobacoo
  • 浏览: 391973 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

js小技巧

阅读更多

  1)改变<input type="text" />标签的状态,用js动态改变样式

<style type="text/css">
        input.readOnly {
            font-family: Arial, Helvetica;
            background-color: transparent;
            font-size: 8pt;
            border-style: inset;
            border-width: 0;
        }

        edit {
            font-family: Arial, Helvetica;
            font-size: 8pt;
            border-style: inset;
        }
    </style>

 

 

 

另外稍微复杂点可以使用两个一个显示,一个隐藏!然后用js去控制显示和隐藏

 

2)正则传参,注意第二个replace:

<script>
a = ["{$}","000000"]
str = "{$}asdasd{$}dasdasasd";
str = str.replace(new RegExp(a[0].replace(/[\\$.+{}()?*^|]/g,"\\$&"),"g"),a[1]);
alert(str)
</script>

 

3)前校验和后校验

前提条件:<input type="test" value="234" />

前校验:使用onkeydown事件:<input type="test" value="234" onkeydown="test()"/>,用test()检测按键,测试插入原数据后时候是否违反了数据约束 ,如果数据将会变得非法返回:event.returnValue = false;

后校验:使用onkeyup事件:<input type="test" value="234" onkeyup="test()"/>,检查非法后将keyCode改为8:

keyCode=8,8是BackSpace命令的键盘码

 

4)取文本域中的光标位置:

<span id="werwer"></span><br>
<textarea name="dsadsa" cols="100" rows="6" id="dsadsa" onClick="getCursorPosition()">

  • 上传文件请压缩后再上传,允许zip, rar, gz, tar, bz2, jar, war格式的压缩文件
  • 上传文件请压缩后再上传,允许zip, rar, gz, tar, bz2, jar, war格式的压缩文件
    </textarea>
    <script language=JScript>
    function getCursorPosition(){
     var src = document.getElementById("dsadsa")
     var oTR = src.createTextRange()
     var textLength = src.innerText.length
     
     oTR.moveToPoint(event.x, event.y)
     oTR.moveStart("character", -1*textLength)
     
     var total = oTR.text.length
     werwer.innerHTML=total
     //window.setTimeout( 'getCursorPosition();', 100 );
    }
    </SCRIPT>
  •  

    5)验证小数位,num是数据源,currencyDigits需要保留的位数,len是文本输入域的最大长度

    function isNumLegal(num, len,currencyDigits) {
        var ui = parseInt(currencyDigits)
        var pattern = "([0-9]{1," + (len - currencyDigits) + "}(\.?[0-9]{1," + ui + "})?$){1}";
        if ((num).search(pattern) != 0) {
            return true;
        }
    }

     

    6)区别区分单击/双击:在用户按下鼠标时,设置一个setTimeout在一个较短的时间内执行一个函数,检测鼠标是点击次数。

    <script>
    var temp1=0
    setInterval('temp1=0',500)
    </script>
    <body onclick="temp1+=1;if(temp1==1){document.title='单击'};else this.ondblclick" ondblclick="temp1=0;document.title='双击'">

     

    7)释放鼠标捕获:releaseCapture(),解决和上面类似的问题,在拖动的时候,区分单击和拖动事件:

    <p style=line-height: 150%>
    <script>
     //Dhtml:用ondrag事件简单的实现鼠标拖动物件.
     //原作:风云舞
    var xx=0,yy=0
    </script>
    <img src="http://www.51js.com/attachments/2008/09/1601_200809111819591.jpg" style=position:absolute; 
    ondragstart="setCapture();xx=event.x-this.offsetLeft;yy=event.y-this.offsetTop;" 
    ondrag=this.style.left=event.x-xx;this.style.top=event.y-yy 
    ondragend="releaseCapture();" 
    onclick="alert('ck')">

     

     8)异步问题一个:在异步时,出现乱码,但是刷新后乱码就争取显示了!原因:我们使用(地址+?+参数)的形式传递参数,在发出请求时,使用的是浏览器默认的编码方式,所以在服务器端收到的是乱码!但是返回的数据是服务器端就编码好的所以是正确编码! 解决:异步请求前进行

    encodeURIComponent(String)

    encodeURI(String)

    9)一个简洁振动效果

     

    <img  id="win" style='position:relative' src="http://www.uanv.net/web/qq.jpg">
    <br /><br />
    <button onclick="zd()">振动</button>
    <script >
    function zd(u){	
    	var a=['top','left'],b=0;
    	u=setInterval(function(){
    		document.getElementById('win').style[a[b%2]]=(b++)%4<2?0:4;
    		if(b>50){clearInterval(u);b=0}
    	},32)
    }
    </script>

      

    分享到:
    评论
    3 楼 wise007 2008-10-07  
    很有借鉴性
    2 楼 congpeixue 2008-09-13  
    var ui = parseInt(currencyDigits)

    感觉这里不严谨  。


    例:currencyDigits ---  010等等....

    修改  :
    var ui = parseInt(currencyDigits, 10)
    1 楼 Jason(aijun) 2008-09-04  
    很好,加油

    相关推荐

      javascript小技巧-js小技巧收集.doc

      这些JavaScript小技巧涵盖了基础语法、数据操作、DOM操作、用户交互等多个方面,对于理解和编写JavaScript代码非常有帮助。学习和熟练运用这些技巧,可以提高开发效率,编写出更高效、更健壮的JavaScript代码。

      JavaScript小技巧全集

      这篇“JavaScript小技巧全集”涵盖了各种实用的编程技巧,旨在帮助开发者提升效率,编写出更简洁、更高效的代码。以下是一些重要的JavaScript知识点,基于描述中的提示: 1. **变量声明与作用域**: - `let`、`...

      javaScript小技巧。

      根据提供的文件内容,我们可以总结出以下几个JavaScript小技巧及相关知识点: ### 1. 引入外部JavaScript文件 在HTML文档中,可以通过`&lt;script&gt;`标签引入外部JavaScript文件来执行脚本代码。例如: ```html ...

      Javascript小技巧之生成html元素.docx

      7. **JavaScript编程的10个有用小技巧**和**12个特别有用的JavaScript小技巧【推举】**:这两篇文章分别分享了10个和12个实用的JavaScript编程技巧,是进阶学习的好资源。 总的来说,掌握生成HTML元素的技巧对...

      200多个js小技巧

      以上这些JavaScript小技巧都是为了增强网页的互动性和用户体验。熟练掌握并灵活运用它们,能让你的网页更加生动有趣。在实际开发中,还可以结合其他前端框架如React、Vue等,将这些技巧与现代Web技术相结合,创建更...

      1000个javascript小技巧

      这本名为"1000个JavaScript小技巧"的资源集锦涵盖了各种实用的编程技巧,旨在帮助开发者提升效率,解决实际问题。以下是一些关键的知识点,将从这1000个小技巧中提炼出来: 1. **变量声明与作用域**:了解`var`、`...

      Javascript小技巧一箩筐

      ### JavaScript小技巧精粹 在Web开发领域,JavaScript作为一门不可或缺的编程语言,其灵活性与功能强大性使得它成为前端开发中的核心技能。本文将基于“JavaScript小技巧一箩筐”这一主题,深入探讨一系列实用的...

      JavaScript小技巧全集 JavaScript教程 JavaScript源代码集

      这个“JavaScript小技巧全集”提供了丰富的教程和源代码,旨在帮助开发者深入理解和掌握JavaScript的各种实用技巧。 首先,我们来看看JavaScript的基本语法。JavaScript是一种弱类型、解释型的语言,它的变量声明不...

      Java js小技巧

      本文将深入探讨“Java js小技巧”这一主题,分享一些实用的编程技巧,帮助开发者提升效率和代码质量。 首先,我们来看Java。Java是一种强类型、面向对象的编程语言,被广泛用于企业级应用开发、Android移动应用以及...

      javascript小技巧

      这个"javascript小技巧"的压缩包显然包含了诸多实用的JavaScript技术与窍门,旨在帮助初学者快速上手,同时也为有经验的开发者提供进一步提升技能的资源。以下是基于标题、描述和文件名推测出的一些JavaScript知识点...

      JavaScript小技巧整理篇(非常全).pdf

      ### JavaScript小技巧整理篇知识点详述 #### 一、引言 本文档旨在总结一系列JavaScript编程中的实用技巧,涵盖从基本操作到高级功能的应用。这些技巧不仅有助于提升开发效率,还能帮助开发者更好地理解和掌握...

      40种javascript小技巧

      ### JavaScript小技巧详解 #### 技巧1:屏蔽鼠标右键 通过在HTML元素上设置`oncontextmenu="window.event.returnValue=false"`属性,可以禁止用户在该元素上使用鼠标右键。例如: ```html ;"&gt; 无法右击此表格 ```...

      javascript小技巧全集

      这个"JavaScript小技巧全集"涵盖了各种实用的编程技巧,旨在帮助开发者提升效率,编写出更优雅、性能更好的代码。无论您是在Windows、MacOS还是Linux等任何操作系统上工作,这些技巧都是通用的。 一、函数与闭包 1....

      常用的一些javascript小技巧

      ### 常用的一些JavaScript小技巧详解 在前端开发领域,JavaScript是不可或缺的编程语言,其灵活多变的特性使得开发者能够实现丰富的交互效果。本文将深入探讨一系列实用的JavaScript小技巧,帮助开发者提高编码效率...

      JavaScript小技巧

      ### JavaScript小技巧详解 在日常开发过程中,JavaScript作为前端开发的核心语言之一,其灵活多变的特性让开发者能够实现各种复杂的功能。对于新手乃至中级开发者而言,掌握一些实用的小技巧可以极大提高编码效率与...

      javascript小技巧合集

      标题:javascript小技巧合集 描述:本文将详细介绍一系列实用的JavaScript技巧,这些技巧涵盖了从基本的用户交互到更复杂的页面控制,旨在帮助开发者优化用户体验,增强网站安全性,并提升开发效率。 ### 重要技巧...

      javascript小技巧归纳

      根据提供的文件信息,我们...以上列举的各项JavaScript小技巧涵盖了从基本的用户交互到更高级的功能实现,对于提高网站的用户体验及安全性都有着重要作用。开发者可以根据实际需求灵活运用这些技巧来优化自己的项目。

    Global site tag (gtag.js) - Google Analytics