<html>
<head>
<!-- js-23 表單驗證-2 -->
<style>
span {color:red;font-size:10}
</style>
<script>
var rules = [ "name.length<2 || "+
"name.length>8 ",
"pwd1.length<6 ",
"pwd2.length<6 || "+
"pwd1 != pwd2",
"name.length<2 || "+
"name.length>8 || "+
"pwd_1.length<6 || "+
"pwd_2.length<6 || "+
"pwd_1 != pwd_2"];
function check_username(){
var rule = rules[0];
var name = form1.username.value;
var n = document.getElementById("nerror");
if(eval(rule)){
n.innerHTML="用戶名長度2-8個字符!";
}else{
n.innerHTML="";
}
}
function check_pwd1(){
var rule = rules[1] ;
var pwd1 = form1.pwd1.value;
var p = document.getElementById("p1error");
if(eval(rule)){
p.innerHTML="密碼長度必須長於6個字符!";
}else{
p.innerHTML="";
}
}
function check_pwd2(){
var rule = rules[2];
var pwd1 = form1.pwd1.value;
var pwd2 = form1.pwd2.value;
var p = document.getElementById("p2error");
if(eval(rule)){
p.innerHTML="長度須長於6個字符/兩次輸須相同!";
}else{
p.innerHTML="";
}
}
function check(){
var rule = rules[3];
var r = true;
with(form1){
var name = username.value;
var pwd_1 = pwd1.value;
var pwd_2 = pwd2.value;
if(eval(rule)){
r = false;
}
}
return r;
}
</script>
</head>
<body>
<table height="10%"><tr><td></td></tr></table>
<table align="center">
<form action="" onSubmit="return check();"
name="form1">
<tr align="center" bgcolor="#FFFFCC">
<td colspan="2">註冊表格</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" name="username"
onBlur="check_username()"/>
<span id="nerror"></span>
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<input type="password" name="pwd1"
onBlur="check_pwd1()"/>
<span id="p1error"></span>
</td>
</tr>
<tr>
<td>再次輸入密碼:</td>
<td>
<input type="password" name="pwd2"
onBlur="check_pwd2()"/>
<span id="p2error"></span>
</td>
</tr>
<tr>
<td>性別:</td>
<td>
男<input type="radio" name="gender"
value="male" checked/>
女<input type="radio" name="gender"
value="female" />
</td>
</tr>
<tr>
<td>學歷:</td>
<td>
<select name="xueli">
<option value="gaozhong">高中
<option value="dazhuan">大專
<option value="daben">大本
<option value="yanjiusheng">研究生
</select>
</td>
</tr>
<tr>
<td>愛好:</td>
<td>
游泳<input type="checkbox" name="hubby"
value="swimming"/>
旅遊<input type="checkbox" name="hubby"
value="travel"/>
足球<input type="checkbox" name="hubby"
value="football"/>
籃球<input type="checkbox" name="hubby"
value="basketball"/>
排球<input type="checkbox" name="hubby"
value="valleyball"/>
</td>
</tr>
<tr>
<td>簡歷:</td>
<td>
<textarea name="resume"
cols="20"
rows="3"></textarea>
</td>
</tr>
<tr align="center" bgcolor="#FFFFCC">
<td colspan="2">
<input type="submit" />
</td>
</tr>
</form>
</table>
<body>
</html>
********************************************
<html>
<head><title>註冊頁面</title>
<script language="javascript" type="text/javascript">
function showExtends(){
var table = document.getElementById("extends");
var display = table.style.display;
if( display == 'none') {
table.style.display = 'block';
}else if( display == 'block') {
table.style.display = 'none';
}
}
function init() {
var user = document.getElementById("username");
user.focus();
}
</script>
</head>
<body οnlοad="init()">
<h1 align="center">註冊頁面</h1>
<hr>
<form action="">
<table align="center" border="1" width="700" height="160">
<tr>
<td colspan="2" align="center"><i><b>註冊信息</b></i></td></tr>
<tr>
<td width="250">用戶名:</td>
<td><input id="username" type="text" name="username"/></td>
</tr>
<tr>
<td >密碼:</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td >確認密碼:</td>
<td><input type="passeord" name="surepwd"/></td>
</tr>
<tr>
<td >高級選項:</td>
<td><input type="checkbox" name="gaoji" value="xuanxiang" οnclick="showExtends()"/>顯示用戶擴展信息設置選項</td>
</tr>
</form>
</table>
<hr>
<form action="">
<table id="extends" align="center" border="1" width="700" height="300" style="display:none">
<tr>
<td colspan="2" align="center"><i><b>擴展信息</b></i></td></tr>
<tr>
<td width="250">安全問題:</td>
<td><select name="anquan">
<option value="wu">無安全問題
<option value="anquan1">你的名字
<option value="anquan2">你的年齡
</select>
</td>
</tr>
<tr>
<td >回答:</td>
<td><input type="text" name="answer"/></td>
</tr>
<tr>
<td >性別:</td>
<td>男<input type="radio" name="gender" value="male" checked/>
女<input type="radio" name="gender" value="female" /></td>
</tr>
<tr>
<td >生日:</td>
<td><input type="text" name="answer" value="YYYY-MM-DD" οnfοcus="this.value=''"/></td>
</tr>
<tr>
<td >愛好:</td>
<td>
<input type="checkbox" name="hubby" value="shangwang"/>上網
<input type="checkbox" name="hubby" value="liaotian"/>聊天
<input type="checkbox" name="hubby" value="xuexi"/>學習<br>
<input type="checkbox" name="hubby" value="youxi"/>遊戲
<input type="checkbox" name="hubby" value="lanqiu"/>籃球
<input type="checkbox" name="hubby" value="football"/>足球
</td>
</tr>
<tr>
<td >個人介紹:</td>
<td>
<textarea name="resume" cols="40" rows="3"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit1" value="提交"/>
<input type="submit" name="reset1" value="重置"/></td>
</tr>
</form>
</body>
</html>
********************************************
<html>
<head>
<title>javascipt</title>
<script src="1.js"></script>
<script>
function myopen(){
window.open('http://www.hao123.com');
}
</script>
</head>
<body>
<input type="button" value="Click me 1"
onClick="window.open('http://www.hao123.com')"/>
<br>
<input type="button" value="Click me 2"
onClick="myopen()"/>
<br>
<input type="button" value="Click me 3"
onClick="myopen2()"/>
</body>
</html>
<!--
1.js
function myopen2(){
window.open('http://www.hao123.com');
}
-->
***********************************************************
<html>
<head>
<script>
function sayHello(){
var c=confirm("hao ma?");
if(c){
var m=prompt("xing:");
alert(m+"你好 huanying");
}
else{
alert("888");
}
}
sayHello();
</script>
</head>
<body></body>
</html>
********************************************************
<html>
<head>
<script>
var x = "hello";
function sayHello(msg){
var x = 500;
document.write(x)
}
sayHello("你好");
document.write("<br>"+x);
</script>
</head>
<body></body>
</html>
***********************************************************
<html>
<head>
<!-- js-10 計時器-1 網頁時鐘 -->
<style>
div{background-color:yellow}
</style>
<script>
var tid = null;
function flush_timer(){
var date = new Date();
var timer = document.getElementById("timer");
timer.innerHTML=date.toLocaleString();
}
function start(){
if(tid==null){
tid = setInterval("flush_timer()",1000);
}
}
function stop(){
if(tid!=null){
clearInterval(tid);
tid = null;
}
}
</script>
<body>
<table align="center">
<tr>
<td>
<div id="timer"></div>
</td>
</tr>
<tr>
<td>
<input type="button" value="開始"
onClick="start()" />
<input type="button" value="停止"
onClick="stop()"/>
</td>
</tr>
</table>
</body>
</head>
</html>
****************************************
<html>
<head>
<!-- js-11 計時器-2 自動滾屏 -->
<script>
var tid = null;
function auto_scroll(){
window.scrollBy(0,1);
}
function start(){
if(tid==null){
tid = setInterval("auto_scroll()",20);
}
}
function stop(){
if(tid!=null){
clearInterval(tid);
tid = null;
}
}
</script>
<body>
<table align="center">
<tr>
<td>
<input type="button" value="開始"
onClick="start()" />
<input type="button" value="停止"
onClick="stop()"/>
</td>
</tr>
</table>
</body>
</head>
</html>
**************************************************
<html>
<head>
<!-- js-14 窗口最大化 -->
<script>
function resize_to_largest(){
moveTo(0,0);
resizeTo(screen.width,screen.height);
}
</script>
</head>
<body>
<div οnclick="resize_to_largest()">Click me to largest!</div>
</body>
</html>
***************************************************
history的使用
<html>
<head>
<script>
</script>
</head>
<body>
<h2>本頁爲history16.html</h2>
<div οnclick="history.back()">上一頁</div>
<div οnclick="history.forward()">下一頁</div>
<div οnclick="history.go(0)">刷新</div>
<a href="history17.html">history17.html</a>
</body>
</html>
<html>
<head>
<script>
</script>
</head>
<body>
<h2>本頁爲history17.html</h2>
<div οnclick="history.back()">上一頁</div>
<div οnclick="history.forward()">下一頁</div>
<div οnclick="history.go(0)">刷新</div>
<a href="history18.html">history18.html</a>
</body>
</html>
<html>
<head>
<script>
</script>
</head>
<body>
<h2>本頁爲history18.html</h2>
<div οnclick="history.back()">上一頁</div>
<div οnclick="history.forward()">下一頁</div>
<div οnclick="history.go(0)">刷新</div>
<a href="history16.html">history16.html</a>
</body>
</html>
********************************************************
<html>
<head>
<style>
</style>
<script>
var tid = null;
var step=10;
function move_new(){
if(window.screenX>300){
step =-10;
}
if(window.screenX<100){
step =10;
}
moveBy(step, 0);
}
function start(){
if (tid == null) {
tid = window.setInterval("move_new()", 20);
}
}
function stop(){
if (tid != null) {
window.clearInterval(tid);
tid = null;
}
}
</script>
</head>
<body>
<table>
<tr bgcolor="pink">
<td>
<div id="timer">
</div>
</td>
</tr>
<tr>
<td>
<input type="button" value="移動" onClick="start()"/>
<input type="button" value="停止" onClick="stop()"/>
</td>
</tr>
</table>
</body>
</html>
**************************************
<html>
<head>
<!-- js-19 navigator -->
<script>
function getInfo(){
var info = "";
for(var prop in navigator){
info = info + prop +
"="+navigator[prop]+"<br>";
}
document.write(info);
}
getInfo();
</script>
</head>
<body></body>
</html>
************************************
<html>
<head>
<!-- js-20 location -->
<script>
function changePage(){
alert("當前url:"+location.href);
location.replace("http://bbs.tarena.com.cn");
}
</script>
</head>
<body>
<div οnclick="changePage()">改變url</div>
</body>
</html>
**************************************
<html>
<head>
<!-- js-21 冒泡 -->
</head>
<body>
<form name="form1" οnclick="alert('form1')">
<input type="button" value="冒泡"
οnclick="alert('button')"/>
</form>
</body>
</html>