JS點(diǎn)擊事件，鼠標(biāo)移動到div上改變大小，還原大小，文本框獲取焦點(diǎn)，統(tǒng)計，簡易計算器
案例1:聲明兩個div，添加點(diǎn)擊事件，點(diǎn)擊第一個div改變大小，點(diǎn)擊第二個還原大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#gaiBianWenZi{
width: 400px; height: 20px;
border: solid red 1px ;text-align: center;
line-height: 20px;cursor: pointer;
}
#seKuai{
width: 100px; height: 100px; background-color:
?red ;margin:0 auto;}
#huanYuanWenZi{
width: 400px; height: 20px;
border: solid green 1px ;text-align: center;
line-height: 20px;cursor: pointer;}
</style>
<script>
function gaiBian(){
var seKuai=document . getElementById("seKuai");
seKuai. style .width="200px";
seKuai. style . height="200px";
seKuai. style . backgroundColor="red";}
function huanYuan(){
seKuai. style . width="100px" ;
seKuai. style .height="100px" ;
seKuai. style. backgroundColor="red" ;}
</script>
</head>
<body>
<div id="gaiBianWenZi" onclick="gaiBian()">?
點(diǎn)擊我改變div色塊大小</div>
<p id="huanYuanWenZi" onclick="huanYuan()">還原div色
塊大小</p>
<div id="seKuai"></div>
</body>
</html>
案例1擴(kuò)展:聲明兩個div，添加點(diǎn)擊事件，點(diǎn)擊第一個div改變大小和顏色，點(diǎn)擊第二個還原大小和顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div2{
width: 400px; height: 20px;
border: solid red 1px ;text-align: center;
line-height: 20px;cursor: pointer;
}
#div1{
width: 100px; height: 100px; background-color: red ;margin:0 auto;}
#p1{
width: 400px; height: 20px;
border: solid green 1px ;text-align: center;
line-height: 20px;cursor: pointer;}
</style>
<script>
function ONCLICK(){
var div1=document . getElementById("div1");
div1. style .width="200px";
div1. style . height="200px";
div1. style . backgroundColor="blue";}
function huanYuan(){
div1. style . width="100px" ;
div1. style .height="100px" ;
div1. style. backgroundColor="red" ;}
</script>
</head>
<body>
<!--點(diǎn)擊div2的時候改變div的大小-->
<!--可以給任何元素加事件，不僅僅局限于按鈕-->
<div id="div2" onclick="ONCLICK()"> 點(diǎn)擊我改變div色塊大小和顏色</div>
<p id="p1" onclick="huanYuan()">還原div色塊大小和顏色</p>
<div id="div1"></div>
</body>
</html>
案例2:鼠標(biāo)移動到div上改變div的大小，移出的時候大小還原
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#seKuai{
width: 100px; height: 100px; background-color:
?red ;margin:0 auto;cursor: pointer;}
</style>
<script>
function gaiBian(){
var seKuai=document . getElementById("seKuai");
seKuai. style .width="200px";
seKuai. style . height="200px";
seKuai. style . backgroundColor="red";}
function huanYuan(){
seKuai. style . width="100px" ;
seKuai. style .height="100px" ;
seKuai. style. backgroundColor="red" ;}
</script>
</head>
<body>
鼠標(biāo)移動到div上改變div的大小，移出的時候大小還原
<div id="seKuai"onmouseover="gaiBian()"? onmouseout="huanYuan() "></div>
</body>
</html>
?案例3:聲明兩個文本框,文本框獲取焦點(diǎn)后將文本框的值賦值給它后面的span,失去焦點(diǎn)后將span的值賦值為"失去焦點(diǎn)",
? ? 并且設(shè)置文字的顏色為紅色,當(dāng)選中其中的內(nèi)容的時候，就將該文本框中的內(nèi)容進(jìn)行彈出來
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
function unameText(){
//this關(guān)鍵字用于表明當(dāng)前對象
var span1=document . getElementById("span1");
span1. innerHTML=document. getElementById("txt1").value;
}
function upwdText(){
var span2=document. getElementById("span2");
span2. innerHTML =document . getElementById("txt2") . value;}
//tiShi:提示
function tiShi1(){
var span1=document . getElementById("span1");
span1. innerHTML="失去焦點(diǎn)了哦";
span1.style. color="red";
}
function tiShi2(){
var span2=document . getElementById("span2");
span2. innerHTML="失去焦點(diǎn)了喲";
span2.style. color="red";
}
</script>
</head>
<body>
<br>用戶名稱:<input type="text"? id="txt1" onfocus="unameText()"?
onblur=" tiShi1()" /><span id="span1"></span><br>
用戶密碼:<input type="text"id="txt2" onfocus ="upwdText()"?
onblur=" tiShi2()" /><span id="span2" ></span>
</body>
</html>
案例4:寫一個文本框，文本框的內(nèi)容進(jìn)行改變后彈出當(dāng)前文本框的內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
function unameText(){
//this關(guān)鍵字用于表明當(dāng)前對象
var span1=document . getElementById("span1");
span1. innerHTML=document. getElementById("txt1").value;
}
function upwdText(){
var span2=document. getElementById("span2");
span2. innerHTML =document . getElementById("txt2") . value;}
//tiShi:提示
function tiShi1(){
var span1=document . getElementById("span1");
span1. innerHTML="失去焦點(diǎn)了哦";
span1.style. color="red";
}
function tiShi2(){
var span2=document . getElementById("span2");
span2. innerHTML="失去焦點(diǎn)了喲";
span2.style. color="red";
}
//chuanZhi:傳值
function xuanZhong(chuanZhi){
alert(chuanZhi.value);}
</script>
</head>
<body>
<br>用戶名稱:<input type="text"? id="txt1" onselect=" xuanZhong(this)" onfocus="unameText()"?
onblur=" tiShi1()" /><span id="span1"></span><br>
用戶密碼:<input type="text"id="txt2" onselect=" xuanZhong(this)"? onfocus ="upwdText()"?
onblur=" tiShi2()" /><span id="span2" ></span>
</body>
</html>
案例5:寫一個下拉框，當(dāng)下拉框的選項進(jìn)行改變的時候彈出下拉框的內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
function xuanZhong(chuanZhi){
alert(chuanZhi.value);}
</script>
</head>
<body>
<select onchange=" xuanZhong(this)" >
<option value="詩書畫唱">詩書畫唱</option>
<option value="三連">三連</option>
<option value="點(diǎn)贊">點(diǎn)贊</option>
</select>
</body>
</html>
案例6:寫一個文本框，文本框的內(nèi)容改變的時候在后面聲明一個span用來統(tǒng)計你輸入了多少個字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
function tiShi(chuanZhi){
var ziShu=chuanZhi. value . length;
var spanIdVar=document . getElementById("spanId");
spanIdVar. innerHTML="你輸入了"+ziShu+"個字";
spanIdVar. style. color="red" ;
}
</script>
</head>
<body>
<input type="text" onkeyup="tiShi(this)" /><span id="spanId" >你輸入了0個字</span>
</body>
</html>
7.簡易計算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
window. onload=function(){
var buttonIdVar=document . getElementById("buttonId");
buttonIdVar. onclick=function(){
var txtIdVar1 =document . getElementById("txtId1");
var txtIdVar2=document. getElementById("txtId2");
if(!isNaN(txtIdVar1.value)&&!isNaN(txtIdVar2.value)){
var txtIdVar3=document. getElementById("txtId3");
//先獲取選中的下標(biāo)：
var selectVar=document .
getElementById("selectId1"). selectedIndex;
//再獲取選中的具體內(nèi)容：
var selectValueVar=document .?
getElementById("selectId1").options[selectVar].value;
switch(selectValueVar){
//每個case對應(yīng)的break;都不能少
case "+":txtIdVar3.value=Number
(txtIdVar1.value )+Number(txtIdVar2.value);break;
case "-":txtIdVar3.value=Number
(txtIdVar1.value )-Number(txtIdVar2.value);break;
case "*":txtIdVar3.value=Number
(txtIdVar1.value )*Number(txtIdVar2.value);break;
case "/":if(Number(txtIdVar2.value==0))
{
// txtIdVar3.value=0;
txtIdVar3.value=" ";
txtIdVar1.value=" ";
txtIdVar2.value=" ";
alert("除數(shù)不能為0，請重新輸入");
}
else{
txtIdVar3.value=Number
(txtIdVar1.value)/Number(txtIdVar2. value);
}
break;
}
}
else{
txtIdVar1.value=" ";
txtIdVar2.value=" ";
//這里不可有txtIdVar3.value=" ";
alert("請輸入數(shù)字");
}}}
</script>
</head>
<body>
<input type="text" id="txtId1" />
<select id="selectId1">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txtId2" />=
<input type="text" id="txtId3" />
<input type="button" value="計算結(jié)果" id="buttonId" />
</body>
</html>
