现在的位置: 首页 > 综合 > 正文

JQuery小练习

2013年10月07日 ⁄ 综合 ⁄ 共 2341字 ⁄ 字号 评论关闭

空闲时候写的一些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文件无错,就可以运行。

 

抱歉!评论已关闭.