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));" />