提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JQuery小练习(实例代码)

jQuery实例代码 练习
2023-06-13 09:14:11 时间
1、按钮倒数10秒之后才能点击。这个效果一般在一些论坛注册时候用到比较多，废话少说，直接上代码：
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript"src="js/jquery-1.3.2.js"></script>
<scripttype="text/javascript">
vartimeOut;
varcount=10;
$(function(){
$("#btnSubmit").attr("disabled","disabled");
$("#btnSubmit").val("确("+count.toString()+")定");
timeOut=setTimeout(ButtonCount,1000);
});
ButtonCount=function(){
if(count==0){
$("#btnSubmit").attr("disabled","");
$("#btnSubmit").val("确定");
clearTimeout(timeOut);
}
else{
count--;
$("#btnSubmit").attr("disabled","disabled");
$("#btnSubmit").val("确("+count.toString()+")定");
setTimeout(ButtonCount,1000);
}
}
</script>
</head>
<body>
<inputtype="button"value="确定"id="btnSubmit"/>
</body>
</html>

2、即点即改，这个效果一个多月前还没有学jquery时觉得好酷，现在觉得其实也非常简单的东西，可以看出jquery在前端效果上大大简化了编写难度，代码如下：
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<styletype="text/css">
.caneditBg
{
background-color:Gray;
}
</style>
<scriptsrc="js/jquery.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$(".canedit").each(function(){
$(this).bind("dblclick",function(){
varhtml=$(this).html();
vartextarea="<textareaname="temTextarea"id="temTextarea"onblur="saveText(this)">"+html+"</textarea>";
$(this).empty().html(textarea);
});
$(this).mouseenter(function(){$(this).addClass("caneditBg")}).mouseleave(function(){$(this).removeClass("caneditBg")});
});
});
saveText=function(o){
vartext=$(o).val();
$(o).parent().empty().html(text);
}
</script>
</head>
<body>
<divclass="canedit">
即点即改！
</div>
<div>
</div>
</body>
</html>

以上代码只需要直接copy到html文件，并且保证导入jquery.js文件无错，就可以运行。

相关文章