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

js小技巧

UIQQCSS浏览器Web 
阅读更多

  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>

      

    分享到：
    | 偶遇js小bug及解决
    评论
    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  
    很好，加油
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

    Magicbox
    Global site tag (gtag.js) - Google Analytics