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="width: 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 ????????????????width: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>jQuery代码
原文地址：https://www.cnblogs.com/HuShaoyi/p/8454220.html