JQuery 小练习(实例代码)_Javascript教程-查字典教程网
JQuery 小练习(实例代码)
JQuery 小练习(实例代码)
发布时间:2016-12-30 来源:查字典编辑
摘要:1、按钮倒数10秒之后才能点击。这个效果一般在一些论坛注册时候用到比较多,废话少说,直接上代码:复制代码代码如下:vartimeOut;va...

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>

即点即改!

</div>

<div>

</div>

</body>

</html>

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类