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>
    

     

  • 相关阅读:
    loj#6433. 「PKUSC2018」最大前缀和(状压dp)
    PKUWC2019游记
    10. Regular Expression Matching
    9. Palindrome Number
    8. String to Integer (atoi)
    7. Reverse Integer
    6. ZigZag Conversion
    5. Longest Palindromic Substring
    4. Median of Two Sorted Arrays
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/hanke123/p/5071646.html
Copyright © 2011-2022 走看看