zoukankan      html  css  js  c++  java
  • JQuery 特效

     
    //按钮倒计时 <script src="../Script/jquery-1.9.1.js"></script> <script language="javascript"> $(document).ready(function () { //$("#Button1").attr("disabled","disabled").attr("value","ClickMe").attr("type","radio"); //var s = $("#Button1").attr("type"); //alert(s); //$("#Button1").removeAttr("disabled"); showTime(); }); var n = 10; //实现按钮倒计时 function showTime() { n--; if (n == 0) {//将 value的值换成“同意”,将 button 的disabled属性 移出 直到 n==0时停止 $("#Button1").attr("value","同意").removeAttr("disabled"); } else { $("#Button1").attr("value", "同意(" + n + ")"); window.setTimeout("showTime()", 1000); } } </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
    
            .white {
                background-color:white;
            }
            .pink {
                background-color:#FFFFcc;
            }
            .m_over {
                background-color:yellow;
                font-weight:bold;
            }
        </style>
        <script src="../Script/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                //$("#GridView1 tr:first").css("background-color", "navy").css("color", "white");
                //$("#GridView1 tr:gt(0):odd").css("background-color", "#ffffcc");
    
                //通过css()方法来操作内联样式
                //var bg = "";
                //$("#GridView1 tr:gt(0)").mouseover(function () {
                //    bg = $(this).css("background-color");
                //    $(this).css("background-color", "yellow");
                //}).mouseout(function () {
                //    $(this).css("background-color", bg);
                //});
    
                //通过操作class来实现光棒效果
                $("#GridView1 tr:gt(0)").mouseover(function () {
                    $(this).addClass("m_over");
                }).mouseout(function () {
                    $(this).removeClass("m_over");
                });
    
    
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Code" DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。" Width="100%">
                <AlternatingRowStyle CssClass="pink" />
                <Columns>
                    <asp:BoundField DataField="Code" HeaderText="Code" ReadOnly="True" SortExpression="Code" />
                    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                    <asp:BoundField DataField="Image1" HeaderText="Image1" SortExpression="Image1" />
                    <asp:BoundField DataField="Image2" HeaderText="Image2" SortExpression="Image2" />
                    <asp:BoundField DataField="Parent" HeaderText="Parent" SortExpression="Parent" />
                </Columns>
                <HeaderStyle BackColor="Navy" ForeColor="White" />
                <RowStyle CssClass="white" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>" DeleteCommand="DELETE FROM [Menu] WHERE [Code] = @Code" InsertCommand="INSERT INTO [Menu] ([Code], [Name], [Image1], [Image2], [Parent]) VALUES (@Code, @Name, @Image1, @Image2, @Parent)" ProviderName="<%$ ConnectionStrings:mydbConnectionString.ProviderName %>" SelectCommand="SELECT [Code], [Name], [Image1], [Image2], [Parent] FROM [Menu]" UpdateCommand="UPDATE [Menu] SET [Name] = @Name, [Image1] = @Image1, [Image2] = @Image2, [Parent] = @Parent WHERE [Code] = @Code">
                <DeleteParameters>
                    <asp:Parameter Name="Code" Type="String" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="Code" Type="String" />
                    <asp:Parameter Name="Name" Type="String" />
                    <asp:Parameter Name="Image1" Type="String" />
                    <asp:Parameter Name="Image2" Type="String" />
                    <asp:Parameter Name="Parent" Type="String" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="Name" Type="String" />
                    <asp:Parameter Name="Image1" Type="String" />
                    <asp:Parameter Name="Image2" Type="String" />
                    <asp:Parameter Name="Parent" Type="String" />
                    <asp:Parameter Name="Code" Type="String" />
                </UpdateParameters>
            </asp:SqlDataSource>
        
        </div>
        </form>
    </body>
    </html>
    

     

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
            #main {
                200px;
                border:1px solid black;
            }
            .title {
                background-color:navy;
                padding:5px;
                color:white;
                font-weight:bold;
                text-align:center;
                margin-top:1px;
            }
            .content {
                background-color:#ffffcc;
                height:300px;
                display:none;
            }
        </style>
        <script src="../Script/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                $(".title").click(function () {
                    if ($(this).next().css("display") != "block") {
                        $(".content").css("display", "none");
                        $(this).next().css("display", "block");
                    } else {
                        $(this).next().css("display", "none");
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="main">
            <div class="title">我的好友</div>
            <div class="content"></div>
            <div class="title">陌生人</div>
            <div class="content"></div>
            <div class="title">黑名单</div>
            <div class="content"></div>
    
        </div>
        </form>
    </body>
    </html>
    

     

    //文本框不能为空提示
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="../Script/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                //var s = $("#ss").html();
                //alert(s);
                //$("#ss").text("我不是猪");
                $("#TextBox1").focus(function () {
                    var s = $(this).val();
                    if (s == "不能为空") {
                        $(this).val("");
                        $(this).css("color", "black");
                    }
                }).blur(function () {
                    var s = $(this).val();
                    if (s.length == 0) {
                        $(this).val("不能为空");
                        $(this).css("color", "#a0a0a0");
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <span id="ss">猪头可爱</span>
    
            <asp:TextBox ID="TextBox1" runat="server" style="color:#a0a0a0" Text="不能为空"></asp:TextBox>
        </div>
        </form>
    </body>
    </html>
    

     

    //文本输入框
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="../Script/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () { 
                $("#TextBox1").keyup(function () {
                    var s = $(this).val();
                    var l = 140 - s.length;
    
                    $("#Label1").html(l);
                })
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" Height="152px" TextMode="MultiLine" Width="338px"></asp:TextBox>
            <br />
            还可以输入<asp:Label ID="Label1" runat="server"></asp:Label>
            字</div>
        </form>
    </body>
    </html>
    

     

  • 相关阅读:
    opencv3.2.0形态学滤波之腐蚀
    Ubuntu下卸载QT5.7.1再重装
    opencv3.2.0形态学滤波之膨胀
    Direct3D中的绘制
    绘制流水线
    初始化Direct3D
    VS2012添加对DirectX SDK中需要文件的引用
    ASCII,Unicode 和通用方式
    对话框访问的7种方式【孙鑫老师教程】
    函数指针
  • 原文地址:https://www.cnblogs.com/hanke123/p/5071646.html
Copyright © 2011-2022 走看看