javascript基礎-常見控件事件處理
（1）鼠標事件-onmouseover、onmouseout
javascript
<!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=utf-8" />
<title>無標題文檔</title>
<script language="javascript">
function overDemo(h){
if(h=="h1"){
var d1=document.getElementById("h1");
if(d1.style.display=="none"){
d1.style.display="block";
}
}else if(h=="h2"){
var d2=document.getElementById("h2");
if(d2.style.display=="none"){
d2.style.display="block";
}
}else if(h=="h3"){
var d3=document.getElementById("h3");
if(d3.style.display=="none"){
d3.style.display="block";
}
}else if(h=="h4"){
var d4=document.getElementById("h4");
if(d4.style.display=="none"){
d4.style.display="block";
}
}else{
var d5=document.getElementById("h5");
if(d5.style.display=="none"){
d5.style.display="block";
}
}
}
function outDemo(h){
if(h=="h1"){
var d1=document.getElementById("h1");
if(d1.style.display=="block"){
d1.style.display="none";
}
}else if(h=="h2"){
var d2=document.getElementById("h2");
if(d2.style.display=="block"){
d2.style.display="none";
}
}else if(h=="h3"){
var d3=document.getElementById("h3");
if(d3.style.display=="block"){
d3.style.display="none";
}
}else if(h=="h4"){
var d4=document.getElementById("h4");
if(d4.style.display=="block"){
d4.style.display="none";
}
}else{
var d5=document.getElementById("h5");
if(d5.style.display=="block"){
d5.style.display="none";
}
}
}
</script>
</head>
<body>
<div style="position:absolute;top:40px;left:30px;width:450px;height:40px;background-color:#9FF">
<table style="width:100%;height:100%;border:solid 1px;role="all";bordercolor="#FF0000">
<tr>
<td width="100" align="center" onmouseout="outDemo('h1')" onmouseover="overDemo('h1')">首頁</td>
<td width="100" align="center" onmouseout="outDemo('h2')" onmouseover="overDemo('h2')">最新商品</td>
<td width="100" align="center" onmouseout="outDemo('h3')" onmouseover="overDemo('h3')">打折商品</td>
<td width="100" align="center" onmouseout="outDemo('h4')" onmouseover="overDemo('h4')">網上訂單</td>
<td width="100" align="center" onmouseout="outDemo('h5')" onmouseover="overDemo('h5')">聯繫咱們</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:30px;width:90px;height:200px;background-color:#CCC;display:none;"id="h1">
<table style="width:100%;height:100%">
<tr>
<td>adwhd</td>
</tr>
<tr>
<td>ahhdws</td>
</tr>
<tr>
<td>hhjdk</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:120px;width:90px;height:200px;background-color:#CCC;display:none;"id="h2">
<table style="width:100%;height:100%">
<tr>
<td>123456</td>
</tr>
<tr>
<td>789456</td>
</tr>
<tr>
<td>321465</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:210px;width:90px;height:200px;background-color:#CCC;display:none;"id="h3">
<table style="width:100%;height:100%">
<tr>
<td>@##$%$%</td>
</tr>
<tr>
<td>)(*&^%$#$#</td>
</tr>
<tr>
<td>?{}++_)%</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:300px;width:90px;height:200px;background-color:#CCC;display:none;"id="h4">
<table style="width:100%;height:100%">
<tr>
<td>AHDWEF</td>
</tr>
<tr>
<td>FHDJJK</td>
</tr>
<tr>
<td>JKLLSD</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:390px;width:90px;height:200px;background-color:#CCC;display:none;"id="h5">
<table style="width:100%;height:100%">
<tr>
<td>+-*/</td>
</tr>
<tr>
<td>-+/*</td>
</tr>
<tr>
<td>++--*/</td>
</tr>
</table>
</div>
</body>
</html>
(2)文本框得到焦點、失去焦點事件-onfocus、onblurhtml
<!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=utf-8" />
<title>無標題文檔</title>
<script>
function change(obj){
obj.value="";
}
function unchange(obj){
if(obj.value.length==0){
obj.style.color="red";
obj.value="師姐你好";
}else{
obj.style.color="black";
}
}
</script>
</head>
<body>
<input type="text" value="helloworld" id="t1" onfocus="change(this)"/><br/><br/>
<input type="text" value="師姐你好" id="t2" name="bun" onblur="unchange(this)" onfocus="change(this)"/>
</body>
</html>
(3)單選框-radiojava
<!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=utf-8" />
<title>無標題文檔</title>
<script>
function Demo(s){
var text=document.getElementById("txt");
if(s==1){
text.value="男";
}else if(s==2){
text.value="女";
}
}
</script>
</head>
<body>
<input type="radio" name="s" value="1"id="r1" onclick="Demo(this.value)"/>男
<input type="radio" name="s" value="2"id="r2" onclick="Demo(this.value)"/>女
<input type="text" name="性別" value="" id="txt" />
</body>
</html>
(4)計算圓的周長和麪積-onclickide
<!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=utf-8" />
<title>無標題文檔</title>
<script>
function calc(){
var r=document.getElementById("r");
var c=document.getElementById("c");
var s=document.getElementById("s");
r.value=parseInt(r.value);
c.value=parseInt(2*3.14*r.value);
s.value=parseInt(3.14*r.value*r.value);
}
</script>
</head>
<body>
<center>
<p>計算圓的周長和麪積</p>
半徑：<input type="text" name="半徑" value="" id="r"/><br/>
周長：<input type="text" name="周長" readonly="readonly" value="" id="c"/><br/>
面積：<input type="text" name="面積" readonly="readonly" value="" id="s"/><br/>
<input type="button" name="result" value="計算" id="result" onclick="calc()"/>
</center>
</body>
</html>
(5)計算總成績與平均成績-parseIntui
<!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=utf-8" />
<title>無標題文檔</title>
<script>
function calc(obj){
var ch=document.getElementById("ch").value;
var ma=document.getElementById("ma").value;
var en=document.getElementById("en").value;
var chinese=parseInt(ch);
var math=parseInt(ma);
var english=parseInt(en);
var sum=chinese+english+math;
var avg=(sum)/3;
if(obj.value=="總成績"){
document.getElementById("sum").value=sum;
}else if(obj.value=="平均成績"){
document.getElementById("avg").value=avg;
}
}
</script>
</head>
<body>
<center>
<table bgcolor="#00CCFF" align="center" width="200px" top="20px" border="FF0000">
<tr>
<td width="100%">科目</td>
<td>成績</td>
</tr>
<tr>
<td width="100%">語文</td>
<td>
<input type="text" name="chinese"id="ch"/>
</td>
</tr>
<tr>
<td width="100%">數學</td>
<td>
<input type="text" name="math"id="ma"/>
</td>
</tr>
<tr>
<td width="100%">英語</td>
<td>
<input type="text" name="english" id="en"/>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="總成績" onclick="calc(this)"
</td>
<td>
<input type="text" name="sum" id="sum"/>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="平均成績" onclick="calc(this)"
</td>
<td>
<input type="text" name="avg" id="avg"/>
</td>
</tr>
</table>
</center>
</body>
</html>
(6)建議購物車-parseInt、parseFloatthis
<!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=utf-8" />
<title>無標題文檔</title>
<script>
function sum(){
var num=parseInt(document.getElementById("num").value);
var price=parseInt(document.getElementById("price").value);
var trans=parseFloat(document.getElementById("trans").value);
var sum=num*price+trans*num;
document.getElementById("num").value=num;
document.getElementById("price").value=price;
document.getElementById("trans").value=trans;
document.getElementById("summary").value=sum;
}
</script>
</head>
<body>
<center>
<table position="absolute" align="center" bgcolor="#FF9999" width="556" top="40px" solid="1px" border="#FF0000" >
<tr>
<td colspan="5">簡易購物車</td></tr>
<tr>
<td width="128">商品名稱</td>
<td width="95">數量（件）</td>
<td width="99">單價（美圓）</td>
<td width="98">運費（美圓）</td>
<td width="114">
<input type="button" value="合計" onclick="sum()"/>
</td>
</tr>
<tr>
<td width="128">跑跑道具</td>
<td width="95">
<input type="text" width="80" id="num"/>
</td>
<td width="99">
<input type="text" width="80"id="price"/>
</td>
<td width="98">
<input type="text" width="80" id="trans"/>
</td>
<td width="114">
<input type="text" width="80" readonly="readonly" id="summary"/>
</td>
</tr>
</table>
</center>
</body>
</html>
(7)計算閏年-onclickspa
<!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=utf-8" />
<title>無標題文檔</title>
<script>
function calc(){
var year=parseInt(document.getElementById("year").value);
if(year%4==0||year%100==0&&year%4==0){
document.getElementById("tex").value=year+"是閏年"
}else{
document.getElementById("tex").value=year+"不是閏年"
}
}
</script>
</head>
<body>
請輸入須要判斷閏年的年份：<br/>
<input type="text" name="year" id="year"/>
<input type="button" value="計算" id="btn" onclick="calc()"/>
<input type="text" id="tex"/>
</body>
</html>
相關文章
- 1. jQuery基礎事件處理
- 2. Javascript事件處理
- 3. JavaScript事件處理
- 4. javascript 事件處理
- 5. javascript 事件基礎
- 6. javaScript基礎事件
- 7. JavaScript 事件基礎
- 8. JavaScript中常見的事件
- 9. JavaScript自學心得一（基礎、語法、函數，異常處理/事件處理）
- 10. [基礎控件]---對CheckBox事件監聽處理
- 更多相關文章...
- • PHP 文件處理 - PHP教程
- • C# 異常處理 - C#教程
- • 常用的分佈式事務解決方案
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章