JS点击事件，鼠标移动到div上改变大小，还原大小，文本框获取焦点，统计，简易计算器
案例1:声明两个div，添加点击事件，点击第一个div改变大小，点击第二个还原大小
<!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()">
点击我改变div色块大小</div>
<p id="huanYuanWenZi" onclick="huanYuan()">还原div色
块大小</p>
<div id="seKuai"></div>
</body>
</html>
案例1扩展:声明两个div，添加点击事件，点击第一个div改变大小和颜色，点击第二个还原大小和颜色
<!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>
<!--点击div2的时候改变div的大小-->
<!--可以给任何元素加事件，不仅仅局限于按钮-->
<div id="div2" onclick="ONCLICK()"> 点击我改变div色块大小和颜色</div>
<p id="p1" onclick="huanYuan()">还原div色块大小和颜色</p>
<div id="div1"></div>
</body>
</html>
案例2:鼠标移动到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>
鼠标移动到div上改变div的大小，移出的时候大小还原
<div id="seKuai"onmouseover="gaiBian()" onmouseout="huanYuan() "></div>
</body>
</html>
案例3:声明两个文本框,文本框获取焦点后将文本框的值赋值给它后面的span,失去焦点后将span的值赋值为"失去焦点",
并且设置文字的颜色为红色,当选中其中的内容的时候，就将该文本框中的内容进行弹出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
function unameText(){
//this关键字用于表明当前对象
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="失去焦点了哦";
span1.style. color="red";
}
function tiShi2(){
var span2=document . getElementById("span2");
span2. innerHTML="失去焦点了哟";
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:写一个文本框，文本框的内容进行改变后弹出当前文本框的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
function unameText(){
//this关键字用于表明当前对象
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="失去焦点了哦";
span1.style. color="red";
}
function tiShi2(){
var span2=document . getElementById("span2");
span2. innerHTML="失去焦点了哟";
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:写一个下拉框，当下拉框的选项进行改变的时候弹出下拉框的内容
<!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="点赞">点赞</option>
</select>
</body>
</html>
案例6:写一个文本框，文本框的内容改变的时候在后面声明一个span用来统计你输入了多少个字
<!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");
//先获取选中的下标：
var selectVar=document .
getElementById("selectId1"). selectedIndex;
//再获取选中的具体内容：
var selectValueVar=document .
getElementById("selectId1").options[selectVar].value;
switch(selectValueVar){
//每个case对应的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("除数不能为0，请重新输入");
}
else{
txtIdVar3.value=Number
(txtIdVar1.value)/Number(txtIdVar2. value);
}
break;
}
}
else{
txtIdVar1.value=" ";
txtIdVar2.value=" ";
//这里不可有txtIdVar3.value=" ";
alert("请输入数字");
}}}
</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="计算结果" id="buttonId" />
</body>
</html>
