JQuery 小練習(實例代碼)
2024-05-06 14:14:31
供稿：網友
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></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、即點即改，這個效果一個多月前還沒有學jquery時覺得好酷，現在覺得其實也非常簡單的東西，可以看出jquery在前端效果上大大簡化了編寫難度，代碼如下：
代碼如下:
<!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></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>
以上代碼只需要直接copy到html文件，并且保證導入jquery.js文件無錯，就可以運行。
