常用JavaScript函数 47 - 58（自我总结） - Just Code

天梯梦

浏览: 13731487 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

常用JavaScript函数 47 - 58（自我总结）

博客分类：

Javascript /Jquery / Bootstrap / Web

JavaScript jQuery IE Chrome XHTML

47. 打印对象

48、点击编辑：

49、防止回车错误提交

50、回车提交

51、 js随机整数函数

52、判断是否为空

53、运行代码

54、禁止复制黏贴

55、防止页面被包含在 frame 里面

56、防新浪微博文字滚动

57、在光标处插入字符(兼容IE&FF)

58、正则表达式验证数字（正整数, 负整数,整数,正小数,负小数,小数,实数,保留1,2,3位小数）

47. 打印对象

<script>

function print_r(obj) {
  var result = [];
  for (var id in obj) {
    try {
      if (typeof(obj[id]) == "function") {
        result.push("function " + id + ": " + obj[id].toString());
      }
      else {
        result.push("property " + id + ": " + obj[id].toString());
      }
    } catch (err) {
      result.push(id + ": inaccessible");
    }
  }
  return result;
}

/*
以下为测试代码
*/
		var defaults = {  
			tablink	           :	'tablink',    
			tabcontent         :	'tabcontent',  
			tabcount           :	'4',          
			loadtab            :	'1',           
			autochangemenu     :	1,             
			changespeed        :	2,            
			stoponhover        :	0   	
		}; 
			
		var list = print_r(defaults);
		document.write(list.join("<br/>"));

</script>

48、点击编辑：

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>直接双击页面元素进行修改的HTML代码_IT知道网_</title>
<script type="text/javascript">
function ShowElement(element)
{
	var tag = element.firstChild.tagName;
	if (typeof(tag) != "undefined" && tag == "INPUT")return;

    var oldhtml = element.innerHTML;  //获得元素之前的内容 

    var newobj = document.createElement('input');   //创建一个input元素
    newobj.type = 'text';   //为newobj元素添加类型
	newobj.value = oldhtml;
	newobj.style.width = element.width;

   
    //设置newobj失去焦点的事件
    newobj.onblur = function(){
        element.innerHTML = this.value ? this.value : oldhtml;   //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml。
        }
    element.innerHTML = '';   //设置元素内容为空
    element.appendChild(newobj);   //添加子元素
   
    newobj.focus() //获得焦点
}
</script>
</head>

<body>
  <div onclick="ShowElement(this)">双击即可出现信息框</div>
</body>
</html>

jquery editable 插件（详见附件）

$('.editable1').editable({onEdit:begin});

参考网址： http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html

49、防止回车错误提交

如果一个form里面有多个input + submit按钮的话，那么在input里面回车一般默认为提交第一个，下面的代码可以防止这样的错误发生：（配合jquery使用）

    $("input").keypress(function (e) {
        var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if (keyCode == 13){
            var i;
            for (i = 0; i < this.form.elements.length; i++)
                if (this == this.form.elements[i])
                    break;
            i = (i + 1) % this.form.elements.length;
            this.form.elements[i].click();
            return false;
        }
        else
            return true;
    });

50、回车提交

$(document).ready(function(){
$("按下回车的控件").keydown(function(e){
         e = (e) ? e : (window.event ? window.event : "");
          var curKey = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
           if(curKey == 13){
                $("#回车事件按钮控件").click();
                return false;
           }
   });
});

或者

<script>
 document.getElementByID('SearchKeyword').onkeydown=function(event){
  e = event ? event :(window.event ? window.event : null);
  if(e.keyCode==13){
   //执行的方法
   alert('回车检测到了');
  }
 }
</script>

51、 js随机整数函数

function randomInt(x1,x2)
{
  var min_int = parseInt(x1);
  var max_int = parseInt(x2);
  if ( isNaN(min_int) || isNaN(max_int) )
  {
    alert('parameter error');
    return false;
  }
 
  x1 = Math.min(min_int,max_int);
  x2 = Math.max(min_int,max_int);
 
  return x1 + Math.floor(Math.random() * (x2 - x1 + 1));
}

//用法：var i = randomInt(1,100);    var j = randomInt('100abc','1000cd');

解析：首先将传过来的参数转化为整型，防止了传过来的参数是字符串的情况，这在直接将页面上的元素的值作为参数的情况下很有用。比如以下：

var v1 = document.getElementById('ele1').value;

var v2 = document.getElementById('ele2').value;

var i = randomInt(v1,v2);

因为从页面获得的值是字符串的格式，所以函数先进行了一些判断操作。

Math.random()-返回0~1之间的一个随机的小数，不包含0和1；

js取整

js取整分为3种情况：

Math.ceil(x)-向上取整，如x=5.1取整为6，x=5.8也取整为6；

Math.floor(x)-向下取整，如x=5.1取整为5，x=5.8也取整为5；

Math.round(x)-四舍五入取整，如x=5.1取整为5，x=5.8取整为6；

Math对象的其他函数:

Math.abs(x)-取绝对值，如x=-1去为1，x=0取0，x=1取1；

Math.pow(x,y)-取X的Y次幂，如x=10,y=2,则返回10的2次方，100；

Math.sqrt(x)-取平方根,如x=25，则返回5；

Math.min(x,y)-取最小值,返回X,Y中的小的数，如x=3,y=5则返回3；

Math.max(x,y)-去最大值，返回X,Y中的大的数，如x=3，y=5则返回5

51、 JavaScript 事件绑定和移除，兼容ie/fx/chrome

<input id="a" type="button" value="点我" />注意执行网页时该按扭并没有事件<br/>

<script language="javascript">
var eventUtil = new Object();
//oTarget:目标 sEventType:事件名称 fnHandler:事件触发的函数名
//事件绑定
eventUtil.addEventHandler = function(oTarget,sEventType,fnHandler)
{
	if(oTarget.addEventListener) oTarget.addEventListener(sEventType,fnHandler,false); //如果是FF
	else if(oTarget.attachEvent) oTarget.attachEvent('on'+sEventType,fnHandler); //如果是IE
	else oTarget['on'+sEventType] = fnHandler;
};
//事件移除
eventUtil.removeEventHandler = function(oTarget,sEventType,fnHandler) 
{
	if(oTarget.removeEventListener) oTarget.removeEventListener(sEventType,fnHandler,false); //如果是FF
	else if (oTarget.detachEvent) oTarget.detachEvent('on'+sEventType,fnHandler); //如果是IE
	else oTarget['on'+sEventType] = null;
};

var a = document.getElementById("a");
eventUtil.addEventHandler(a,'click',Hello_ok);

function Hello_ok(){ alert("您好！欢迎您光临Web圈，祝您开心！"); }

onabort：图像的加载被中断
onblur：元素失去焦点
onchange：域的内容被改变
onclick：当用户点击某个对象时调用的事件句柄
ondblclick：当用户双击某个对象时调用的事件句柄
onerror：在加载文档或图像时发生错误
onfocus：元素获得焦点
onkeydown：某个键盘按键被按下
onkeypress：某个键盘按键被按下并松开
onkeyup：某个键盘按键被松开
onload：一张页面或一幅图像完成加载
onmousedown：鼠标按钮被按下
onmousemove：鼠标被移动
onmouseout：鼠标从某元素移开
onmouseover：鼠标移到某元素之上
onmouseup：鼠标按键被松开
onreset：重置按钮被点击
onresize：窗口或框架被重新调整大小
onselect：文本被选中
onsubmit：确认按钮被点击
onunload：用户退出页面

52、判断是否为空

function empty (mixed_var) {
    var key;    
    if (mixed_var === '' ||
        mixed_var === ' ' ||        
        mixed_var === 0 ||
        mixed_var === '0' ||
        mixed_var === null ||        
		mixed_var === false ||
        typeof mixed_var === 'undefined'
    ){
        return true;
    } 
    if (typeof mixed_var == 'object') {
        for (key in mixed_var) {
            return false;
        }        return true;
    }
 
    return false;
}

if(empty(color)) alert('empty!');

53、运行代码

<script language="javascript">
	function runCode(){
		var Code=Cont.value;
		var newwin=window.open('','','');
		newwin.opener=null
		newwin.document.write(Code);
		newwin.document.close();
	}
</script>

<textarea name="Cont" cols="50" rows="10" id="Cont"></textarea><br>
<input type="button" name="Submit" value="运行代码" onClick="runCode()">

54、禁止复制黏贴

<script>
// check tel number and "-"
function checktel() {
    if (event.keyCode != 45 && (event.keyCode < 48 || event.keyCode > 57)) event.returnValue = false;
}
</script>
<body oncopy="return false;" onpaste="return false;" onselectstart="return false;" oncut="return false;">
	<input type="text" name="company_fax" id="company_fax" size="30" maxlength="20" onkeypress="checktel()" style="ime-mode:disabled" onpaste="return false;" tabindex="1"/>
</body>

55、防止页面被包含在 frame 里面

<script type="text/javascript">
function frameBuster() {
	if (window != top) top.location.href = location.href;
}
window.onload = frameBuster;
</script>

56、防新浪微博文字滚动

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script language="javascript">
 $(function(){
	var scrtime;
		$("#con").hover(function(){
            clearInterval(scrtime);
         },function(){
			 scrtime = setInterval(function(){
				var $ul = $("#con ul");
				var liHeight = $ul.find("li:last").height();
				$ul.animate({marginTop : liHeight+40 +"px"},1000,function(){
					 
				$ul.find("li:last").prependTo($ul)
				$ul.find("li:first").hide();
				$ul.css({marginTop:0});
				$ul.find("li:first").fadeIn(1000);
			});        
		},3000);
	}).trigger("mouseleave");
 });
 </script>
 <style type="text/css">
	 *{ margin:0; padding:0;}
	 ul,li{ list-style-type:none;}
	 body{ font-size:13px; background-color:#999999;}
	 #con{ width:700px; height:400px; margin:10px auto; position:relative; border:1px #666 solid; background-color:#FFFFFF; 
	 overflow:hidden;}
	 #con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}
	 #con ul li{ width:100%;  border-bottom:1px #333333 dotted; padding:20px 0; overflow: }
	 #con ul li a{ float:left;  border:1px #333333 solid; padding:2px;}
	 #con ul li p{ margin-left:68px;line-height:1.5;  padding:10px;}
 </style>

 <div id="con">
   <ul>
     <li> <a href="http://www.websjy.com/bbs/"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
         <p class="vright">111111111111111111
Republican Mitt Romney played down on Thursday the healthcare reforms he crafted as Massachusetts governor as he sought the support of conservatives for his party's 2012 presidential nomination.</p>
     </li>
     <li> <a href="http://www.websjy.com/bbs/"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
         <p class="vright">22222222222222222222222  Australia’s total number of jobs advertised in major metropolitan newspapers and on the internet rose by 1.0 per cent in April to an average of 197,637 advertisements per wee... </p>
     </li>
     <li> <a href="http://www.websjy.com/bbs/"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
         <p class="vright">3333333333333333333333 A well-known financial commentator has called for a return to what he calls the "true gold standard", which would see the value of paper currencies tied to Gold Bullion. </p>
     </li>
     <li> <a href="http://www.websjy.com/bbs/"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
         <p class="vright">44444444444444444  Repealing billions of dollars in tax breaks for Big Oil won't raise U.S. fuel prices, Senator Max Baucus said in an opening shot directed at top petroleum executives summoned to Capitol Hill on Thursday to defend their surging profits.</p>
     </li>
     <li> <a href="http://www.websjy.com/bbs/"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
         <p class="vright">55555555555555555555  A barrier to financial literacy is the use by some financial planners, fund managers and listed companies of unnecessarily complex language when communicating with their investors.</p>
     </li>
   </ul>
 </div>

57、在光标处插入字符(兼容IE&FF)

<html>
<head>

    <script>
        function AddText(str) {
            var ubb = document.getElementById("text1");
            var ubbLength = ubb.value.length;
            ubb.focus();
            if (typeof document.selection != "undefined") {
                document.selection.createRange().text = str;
            }
            else {
                ubb.value = ubb.value.substr(0, ubb.selectionStart) + str + ubb.value.substring(ubb.selectionStart, ubbLength);
            }
        }

 

        function Underline() {
            var tUnderline = prompt("请输入要设置的下划线文字\n标签:[u][/u]", "")//
            if (tUnderline == "" || tUnderline == null) {
                return;
            }
            tUnderline = "[u]" + tUnderline + "[/u]"
            AddText(tUnderline);
        }

        var lastFocusObj;
        function setlastFocusObj(obj) {
            lastFocusObj = obj;
        }

    </script>

</head>
<body>
    <textarea id="text1" cols="40" rows="8"></textarea>
    <a href="javascript:Underline();void(0)">下线线</a>
</body>
</html>

58、正则表达式验证数字（正整数, 负整数,整数,正小数,负小数,小数,实数,保留1,2,3位小数）

正整数:    <input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^\d+$/.test(this.value));" /> 
<br> 
负整数:    <input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^-\d+$/.test(this.value));" /> 
<br> 
整　数:    <input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^-?\d+$/.test(this.value));" /> 
<br> 
正小数:    <input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^\d+\.\d+$/.test(this.value));" /> 
<br> 
负小数:    <input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^-\d+\.\d+$/.test(this.value));" /> 
<br> 
小　数:    <input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^-?\d+\.\d+$/.test(this.value));" /> 
<br> 
实　数:    <input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^-?\d+\.?\d*$/.test(this.value));" /> 
<br> 
保留1位小数:<input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^-?\d+\.?\d{0,1}$/.test(this.value));" /> 
<br> 
保留2位小数:<input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^-?\d+\.?\d{0,2}$/.test(this.value));" /> 
<br> 
保留3位小数:<input type="text" size="20" onkeydown="if(event.keyCode == 13) alert(/^-?\d+\.?\d{0,3}$/.test(this.value));" />

转帖注明：http://justcoding.iteye.com/blog/734964

jquery.editable.rar (44.3 KB)
下载次数: 7

分享到：

Display Alexa Traffic Rank Statistics (A ... | javascript图片浏览器的核心——图片预加载

2010-08-11 23:23
浏览 2248
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

常用JavaScript函数 47 - 58（自我总结）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

常用JavaScript函数 47 - 58（自我总结）

评论

发表评论

相关推荐

使用jQuery和Pure.CSS创建一个可编辑的表格

2016十大优秀jQuery插件推荐

jQuery .tmpl() 用法

jQuery：从零开始，DIY一个jQuery（2）

jQuery：从零开始，DIY一个jQuery（1）

Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar

jQuery: 操作select option方法集合

jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()

jQuery: 选择器(DOM,name,属性,元素)

jQuery: 合并表格中相同文本的相邻单元格

Bootstrap 3: 使用注意box-sizing细节及解决方法

域名详解

Bootstrap 3: 图标转换事件 Change icons when toggle

Bootstrap 3: 图标转换事件 Change icons when toggle

jQuery：无限循环两个或者多个事件 click / toggle between two functions

javascript 中面向对象实现 如何继承

javascript 中的面向对象实现 如何封装

AngularJS jQuery 共存法则

七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX

七步从Angular.JS菜鸟到专家（2）：Scopes

最近访客更多访客>>

javascript 中面向对象实现如何继承

javascript 中的面向对象实现如何封装