这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果:
[Ctrl+A 全选 注:
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- 密码输入框
- </title>
- <meta name="generator" content="Microsoft FrontPage 6.0" />
- <meta name="author" content="lin.x" />
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <style type="text/CSS">
- <!-- *{font-size:12px;font-family:verdana;color:#339933;} #contain{margin-left:64px;padding:3px;padding-bottom:7px;border:1px
- solid #339933;border-top:7px solid #339933;width:125px;height:145px;display:none;}
- [xmlns] #contain{padding-left:5px;width:113px;} .nbox,.text{float:left;border:1px
- solid #339933;border-top:2px solid #339933;} .nbox{margin:5px;} .text{margin:5px
- 4px;} a{padding:4px 8px;text-decoration:none;line-height:2;} a:hover{background-color:#ACE89B;}
- .text a{padding:5px 4px 4px 3px;} -->
- </style>
- <script type="text/javascript">
- function rand() {
- return Math.floor(Math.random() * 10);
- }
- var rangenum = new Array();
- var tem;
- for (var i = 0; i < 10; i++) {
- rangenum.push(i);
- }
- for (var i = 0; i < 10; i++) {
- var a = rand();
- var b = rand();
- tem = rangenum[a];
- rangenum[a] = rangenum[b];
- rangenum[b] = tem;
- }
- function creatnums() {
- for (i = 0; i < rangenum.length; i++) {
- document.writeln("<div class=\"nbox\" ><a href=\"#\"onclick=\"input(" + rangenum[i] + ")\">" + rangenum[i] + "</a></div>");
- }
- document.writeln("<div class=\"text\"><a href=\"#\" onclick='input(-1)'>退格</a><a href=\"#\" onclick=\"clearinput()\">清除</a></div>");
- }
- function input(i) {
- var pwd = document.form.pwd.value;
- if (pwd.length < 8 || i == '-1') {
- if (i == '-1') {
- document.form.pwd.value = pwd.substring(0, pwd.length - 1);
- } else {
- document.form.pwd.value = pwd + i;
- }
- clearTimeout(timer);
- timer = setTimeout("hiddenpad();document.getElementById('OK').focus()", 4000)
- } else {
- clearTimeout(timer);
- alert("最多输入8位!");
- hiddenpad();
- }
- }
- function clearinput() {
- document.form.pwd.value = "";
- }
- var timer
- function showpad() {
- document.getElementById('contain').style.display = "block";
- clearTimeout(timer) timer = setTimeout("hiddenpad()", 3000)
- }
- function hiddenpad() {
- document.getElementById('contain').style.display = "none";
- }
- function noinput() {
- var pwd = document.form.pwd.value;
- document.form.pwd.value = pwd.substring(0, pwd.length - 2);
- }
- </script>
- </head>
- <body>
- <form name="form" action="http://www.jb51.net">
- 请输入密码
- <input type="password" name="pwd" onclick="showpad()" onkeydown="return false;"
- size="8">
- <input type="button" value=" OK " onclick="hiddenpad()" id="OK">
- </form>
- <div>
- <script type="text/javascript">
- creatnums();
- </script>
- </div>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0425/288466.html