javaScript(三)

最新推荐文章于 2023-07-31 12:48:56 发布

疯狂小王子

最新推荐文章于 2023-07-31 12:48:56 发布

阅读量206

点赞数

分类专栏： JavaScript 文章标签： css java html5 easyui

本文链接：https://blog.csdn.net/yelang0111/article/details/76407448

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

主要内容：表单验证，有案例源代码。时间和日期函数的使用，一个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