javaScript(三)

主要內容：表單驗證，有案例源代碼。時間和日期函數的使用，一個css+js+html5的動態時間小動畫

1.表單驗證：

表單的驗證方式有很多，正則表達式是我們這次使用的驗證方式，還有easyUI自帶驗證，當然現在的html5也可以用自帶的驗證，但是大多數時候我們都要根據不同需要寫自己的驗證，

在表單驗證我們會使用：

（1）onsubmit事件，這個是表單提交事件，

（2）onblur，這個是失去焦點事件，這個事件一般用在註冊頁面較多。

（3）onkeyup，這是按鍵釋放事件，

上面這三個是我們今天能用到的，當然事件還有很多比如：window事件

屬性	值	描述
onafterprint	script	文檔打印之後運行的腳本。
onbeforeprint	script	文檔打印之前運行的腳本。
onbeforeunload	script	文檔卸載之前運行的腳本。
onerror	script	在錯誤發生時運行的腳本。
onhaschange	script	當文檔已改變時運行的腳本。
onload	script	頁面結束加載之後觸發。
onmessage	script	在消息被觸發時運行的腳本。
onoffline	script	當文檔離線時運行的腳本。
ononline	script	當文檔上線時運行的腳本。
onpagehide	script	當窗口隱藏時運行的腳本。
onpageshow	script	當窗口成爲可見時運行的腳本。
onpopstate	script	當窗口歷史記錄改變時運行的腳本。
onredo	script	當文檔執行撤銷（redo）時運行的腳本。
onresize	script	當瀏覽器窗口被調整大小時觸發。
onstorage	script	在 Web Storage 區域更新後運行的腳本。
onundo	script	在文檔執行 undo 時運行的腳本。
onunload	script	一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。

form事件

onblur	script	元素失去焦點時運行的腳本。
onchange	script	在元素值被改變時運行的腳本。
oncontextmenu	script	當上下文菜單被觸發時運行的腳本。
onfocus	script	當元素獲得焦點時運行的腳本。
onformchange	script	在表單改變時運行的腳本。
onforminput	script	當表單獲得用戶輸入時運行的腳本。
oninput	script	當元素獲得用戶輸入時運行的腳本。
oninvalid	script	當元素無效時運行的腳本。
onreset	script	當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。
onselect	script	在元素中文本被選中後觸發。
onsubmit	script	在提交表單時觸發。

keyboard事件

屬性	值	描述
onkeydown	script	在用戶按下按鍵時觸發。
onkeypress	script	在用戶敲擊按鈕時觸發。
onkeyup	script	當用戶釋放按鍵時觸發。

mouse事件

屬性	值	描述
onclick	script	元素上發生鼠標點擊時觸發。
ondblclick	script	元素上發生鼠標雙擊時觸發。
ondrag	script	元素被拖動時運行的腳本。
ondragend	script	在拖動操作末端運行的腳本。
ondragenter	script	當元素元素已被拖動到有效拖放區域時運行的腳本。
ondragleave	script	當元素離開有效拖放目標時運行的腳本。
ondragover	script	當元素在有效拖放目標上正在被拖動時運行的腳本。
ondragstart	script	在拖動操作開端運行的腳本。
ondrop	script	當被拖元素正在被拖放時運行的腳本。
onmousedown	script	當元素上按下鼠標按鈕時觸發。
onmousemove	script	當鼠標指針移動到元素上時觸發。
onmouseout	script	當鼠標指針移出元素時觸發。
onmouseover	script	當鼠標指針移動到元素上時觸發。
onmouseup	script	當在元素上釋放鼠標按鈕時觸發。
onmousewheel	script	當鼠標滾輪正在被滾動時運行的腳本。
onscroll	script	當元素滾動條被滾動時運行的腳本。

還有media多媒體事件這裏就不列出來了這些事件網上都有。

這裏提供我寫一個小的驗證下載鏈接：http://download.csdn.net/detail/yelang0111/9915749

2.時間和日期的使用

Data在我們項目中經常使用，最簡單一個：document.write(Date())；可以獲取電腦當前時間，但是格式不是我們常見的格式，

下面看一個簡單的代碼：

這是效果圖：

html裏代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/date.js"></script>
	</head>
	<body οnlοad="myClock()">
		<span id="year"></span>年
		<span id="month"></span>月
		<span id="day"></span>日
		星期：<span id="dayOfWeek"></span><br>
		<span id="time"></span>
		
	</body>
</html>

js裏的代碼：

function myClock(){
	
	var objTime = new Date();
	var year = objTime.getFullYear();
	var month = objTime.getMonth();
	var day = objTime.getDate();
	var dayOfWeek = objTime.getDay();
	var hour = objTime.getHours();
	var minute = objTime.getMinutes();
	var second = objTime.getSeconds();
	
	
	hour = hour<10?"0"+hour:hour;
	minute = minute<10?"0"+minute:minute;
	second = second<10?"0"+second:second;
	
	switch(dayOfWeek){
		
		case 0:dayOfWeek="日";break;
		case 1:dayOfWeek="一";break;
		case 2:dayOfWeek="二";break;
		case 3:dayOfWeek="三";break;
		case 4:dayOfWeek="四";break;
		case 5:dayOfWeek="五";break;
		case 6:dayOfWeek="六";break;
	}

	
	document.getElementById("year").innerHTML=year;
	document.getElementById("month").innerHTML=month;
	document.getElementById("day").innerHTML=day;
	document.getElementById("dayOfWeek").innerHTML=dayOfWeek;
	document.getElementById("time").innerHTML=hour+":"+minute+":"+second;
	
	
	
	setTimeout("myClock()",1000);
	
	
}

//window.onload = myClock;//這句的意思是自動運行js,頁面的body裏寫事件這裏就可以註釋掉了

3.一個小動畫時間：

html裏代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/thermoClocl.css"/>
		<style type="text/css">
			.clock{
				width: 600px;
				height: 600px;
				margin: 50px auto;
				background: url(img/clock.jpg) no-repeat;
			}
			.clock div{
				
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			.h{
				background: url(img/hour.png) no-repeat center center;
			}
			.m{
				background: url(img/minute.png) no-repeat center center;
			}
			.s{
				background: url(img/second.png) no-repeat center center;
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="h" id="hour"></div>
			<div class="m" id="minute"></div>
			<div class="s" id="second"></div>
	
		</div>
		
	</body>
</html>

<script type="text/javascript">
	var  hour = document.getElementById("hour");
	var  minute = document.getElementById("minute");
	var  second = document.getElementById("second");
	var s = 0,m = 0, h = 0,ms = 0;
	setInterval(function(){
		var date = new Date;
		ms = date.getMilliseconds();
		s= date.getSeconds() + ms/1000;
		m = date.getMinutes() + s/60;
		h = date.getHours()%12 + m/60;
//		console.log(h);
		
		second.style.webkitTransform = "rotate("+ s*6+"deg)";
		minute.style.webkitTransform = "rotate("+m*6+"deg)";
		hour.style.webkitTransform = "rotate("+h*30+"deg)";
	},1000);
</script>

4.另一個動畫事件圖：

html代碼：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/thermoClocl.css"/>
		<script type="text/javascript" src="js/thermoClocl.js">
		</script>
	</head>

	<body>
		<span>小時：</span>
		<div id="ho">
			
		</div>
		<span>分鐘：</span>
		<div id="mi">
	
		</div>
		<span>秒：</span>
		<div id="se">
			
			
		</div>
		
		
	</body>

</html>

js裏代碼：

function addDiv(idName,count){
	var objHO=document.getElementById(idName);
	for(var i=0;i<count;i++){
	var objC=document.createElement("div");
	objHO.appendChild(objC);
	}
}
function myload(){
	addDiv("ho",24);
	addDiv("mi",59);
	addDiv("se",59);
	mytime();
}
	
function mytime(){
	var objDate=new Date;
//	秒針循環變亮
	var se=objDate.getSeconds();
	var arrSE=document.getElementById("se").getElementsByTagName("div");
	if(se<=0){
	for(var i=0;i<59;i++){
		arrSE[i].style.backgroundColor="gray";
	}
	}	
	 for(var i=0;i<se;i++){
	 	arrSE[i].style.backgroundColor="red";
	 }
	 
//	分鐘循環變亮
	 var mi = objDate.getMinutes();
	 var arrMI=document.getElementById("mi").getElementsByTagName("div");
	 if(mi<=0){
	 	for(var i=0;i<59;i++){
	 	}
	 }
	 for(var i=0;i<mi;i++){
	 	arrMI[i].style.backgroundColor="red";
	 	
	 }
	 
//	 小時循環變亮

	var ho = objDate.getHours();
	var arrHO=document.getElementById("ho").getElementsByTagName("div");
	if(ho<0){
		for(var i=0;i<24;i++){
			arrHO[i].style.backgroundColor="gray";
		}
	}
	
	for(var i=0;i<ho;i++){
		
		arrHO[i].style.backgroundColor="red";
	}
	
	
	 setTimeout("mytime()",1000);
	
}
window.οnlοad=myload;

案列動畫下載鏈接（裏面有兩個）：http://download.csdn.net/detail/yelang0111/9915749

yelang0111

發佈了30 篇原創文章 · 獲贊 16 · 訪問量 2萬+

私信關注

HTML6（六）

javaScript(七)

HTML5(三)

一個簡單的函數封裝（JavaScript+html）

仿淘寶輸入框（JavaScript+html）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結