zoukankan html css js c++ java

jQuery代码

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5     <title></title>
 6     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
 7     <script type="text/javascript">
 8        $(document).ready(function(){
 9            var remainSecond=10;
10            var intervalId=setInterval(function(){
11                remainSecond--;
12                if(remainSecond<=0){
13                    $("#registerBtn").val("注册").prop("disabled",false);
14                    clearInterval(intervalId);
15                }else{
16                    $("#registerBtn").val("请先阅读服务条款"+"("+remainSecond+")");
17                }
18            },1000)
19        })
20     </script>
21 </head>
22 <body>
23 <div style=" 600px;height: 371px;background-color: lightgray">
24     服务条款。。。
25 </div>
26 <br/>
27 <input id="registerBtn" type="submit" value="请先阅读服务条款（10）" disabled="disabled"/>
28 </body>
29 </html>

注册按钮倒计时

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5     <title></title>
 6     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
 7     <script type="text/javascript" src="tools.js"></script>
 8     <script type="text/javascript">
 9       $(document).ready(function(){
10           setInterval(function(){
11               $("#clockDiv").html(getDateString(new Date()));
12           },1000);
13       });
14     </script>
15 </head>
16 <body>
17 <div id="clockDiv"></div>
18 </body>
19 </html>

文本时钟

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5     <title></title>
 6     <style type="text/css">
 7             #table td{
 8                 40px;
 9                 height:19px;
10                 background-color:#F3F3F3;
11                 border:1px solid #D0D0D0;
12                 color:#BBBBBB;
13                 line-height:9px;
14                 color: khaki;
15             }
16 
17         </style>
18     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
19     <script type="text/javascript" src="tools.js"></script>
20     <script type="text/javascript">
21       $(document).ready(function(){
22           $("#password").keyup(function(){
23               var level = checkPasswordLevel(this.value);
24               switch (level)
25               {
26                   case 1:{
27                       $("#td1").css("backgroundColor","#ff8040");
28                       $("#td2").css("backgroundColor","");
29                       $("#td3").css("backgroundColor","");
30                       break;
31                   }
32                   case 2:{
33                                         $("#td1").css("backgroundColor","#ffff6f");
34                                         $("#td2").css("backgroundColor","#ffff6f");
35                                         $("#td3").css("backgroundColor","");
36                                         break;
37                                     }
38                   case 3:{
39                                        $("table td").css("backgroundColor","#a8ff24");
40                                         break;
41                                     }
42               }
43           })
44       });
45     </script>
46 </head>
47 <body>
48 <label for="password">密码：</label>
49     <input id="password" type="password" name="password" />
50     <table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
51         <tr align="center">
52             <td id="td1">弱</td>
53             <td id="td2">中</td>
54             <td id="td3">强</td>
55         </tr>
56     </table>
57 
58 </form>
59 </body>
60 </html>

密码强度检测

查看全文

相关阅读:
php第九节课
 php第八节课
 php第七节课
 php第六讲
 php第五节课
 php第四节课
 php第三节课
 Golang Slice切片
 Golang 反射
 Golang 流程控制

原文地址：https://www.cnblogs.com/HuShaoyi/p/8454220.html