JQuery 小练习(实例代码)

放寒假加班vv

放寒假加班vv

2016-02-19 15:11

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐JQuery 小练习(实例代码),赶紧看过来吧!
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文件无错,就可以运行。
展开更多 50%)
分享

猜你喜欢

JQuery 小练习(实例代码)

Web开发
JQuery 小练习(实例代码)

JQUERY操作JSON实例代码

Web开发
JQUERY操作JSON实例代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery框架实例代码分析

Web开发
jQuery框架实例代码分析

jquery的颜色选择插件实例代码

Web开发
jquery的颜色选择插件实例代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

基于JQuery框架的AJAX实例代码

Web开发
基于JQuery框架的AJAX实例代码

jQuery 学习入门篇附实例代码

Web开发
jQuery 学习入门篇附实例代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

解析Servlet/JSP会话跟踪机制

解析Servlet/JSP会话跟踪机制

kingsoft文件是什么

kingsoft文件是什么
下拉加载更多内容 ↓