jquery 小例子(按钮倒数,即点即改)

发布时间:2020-05-17编辑:脚本学堂
为大家提供二个jquery的小例子,一个是按钮倒数10秒之后才能点击,一个是即点即改,小功能大用途,多用在用户注册与信息编辑方面。有需要的朋友,可以参考下。

为大家提供二个jquery的小例子,一个是按钮倒数10秒之后才能点击,一个是即点即改,小功能大用途,多用在用户注册与信息编辑方面。
有需要的朋友,可以参考下。

1、按钮倒数10秒之后才可以点击,多用于论坛用户注册。
 

复制代码 代码示例:
<!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>
<title>用户注册_脚本学堂_www.jb200.com</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var timeOut;
var count = 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>
<input type="button" value="确 定" id="btnSubmit" />
</body>
</html>

2、即点即改,即编辑与保存都在本页面完成,无需跳转。
 

复制代码 代码示例:
<!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>
<title>即点即改_脚本学堂_www.jb200.com</title>
<style type="text/css">
.caneditBg
{
background-color:Gray;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".canedit").each(function() {
$(this).bind("dblclick", function() {
var html = $(this).html();
var textarea = "<textarea name='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) {
var text = $(o).val();
$(o).parent().empty().html(text);
}
</script>
</head>
<body>
<div class="canedit">
即点即改!
</div>
<div>
</div>
</body>
</html>
 

jquery真是个奇妙的好东东,建议大家动手测试一下上面的二个例子,提高会更快哦。