2021.10.23
实例一、实现电话拨号键盘
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实现电话拨号键盘</title>
</head>
<body>
<div class="css-div-button">
<button>1</button>
<button>2</button>
<button>3</button><br>
<button>4</button>
<button>5</button>
<button>6</button><br>
<button>7</button>
<button>8</button>
<button>9</button><br>
<button>*</button>
<button>0</button>
<button>#</button><br>
<input type="text" id="id-input-tel" readonly>
</div>
</body>
<script type="text/javascript">
window.onload=function(){//在页面加载完成后执行
var arrTel=["1","2","3","4","5","6","7","8","9","*","0","#"];
var arrBtm=document.getElementsByTagName("button");
var tel=document.getElementById("id-input-tel");
for(var i=0;i<arrBtm.length;i++){
arrBtm[i].index=i;//index返回指定元素相对于其他元素的index位置
arrBtm[i].onclick=function(){
tel.value+=arrTel[this.index];//前面如果没有写的arrBtm[i].index=i;此处的this.index会返回一个underfined值，所以在之前要指定arrBtm[i].index=i,后面才能用上this.index
}
}
}
</script>
</html>
js中div[i].index=i是什么意思
index是一个自定义属性，定义为索引值，索引值与元素一一对应；我觉得就像是目录和章节的关系，对元素进行编号，
.index是返回索引号，与元素一一对应
实例二、为按钮添加背景颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>为按钮添加背景颜色</title>
</head>
<body>
<div clas="css-div-button">
<button>Red</button>
<button>Yello</button>
<button>Blue</button>
<button id="1">Black</button>
<button id="2">Green</button>
</div>
</body>
<script type="text/javascript">
var colorbtn=["Red","Yellow","Blue"]
var arrbtn=document.getElementsByTagName("button")
for(var i=0;i<arrbtn.length;i++){
arrbtn[i].style.backgroundColor=colorbtn[i];
}
var colorbtn=document.getElementById("1");
colorbtn.onclick=function(){
colorbtn.style.backgroundColor="Black";
}
var colorbtn2=document.getElementById("2");
colorbtn2.onclick=function(){
colorbtn2.style.backgroundColor="Green"
}
</script>
</html>
当点击button触发事件时，建议先在js中连接所要的id元素对象，用.οnclick=function()来写。
我刚开始写点击改变背景颜色时，是在button里写的οnclick=“xxx”，然后在js里调用方法function xxx(){}发现背景颜色没有改变，原因想了半天也不知道为什么。
PS：在用button的方法时别用window.οnlοad=function()方法，会在你button未点击时先加载一遍程序，直接调用了点击事件，应该也有办法可以避免，我学艺尚浅，暂时不知道怎么避免这个问题。
实例三、不同按钮提交到不同的表单地址
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>不同按钮提交到不同的表单地址</title>
</head>
<body>
<form name="formMulti" method="get" enctype="multipart/form-data" action=""><!-- enctype就是encodetype就是编码类型的意思。
multipart/form-data是指表单数据中由多部分构成，既有文本数据，又有文件等二进制数据,action是发送的地址 -->
<p>First Name: <input type="text" name="fname" value="King"></p>
<p>Last Name: <input type="text" name="lname" value="Wang"></p>
<button type="submit" name="btnCh" onClick="submit_ch()">提交(CH)</button>
<button type="submit" name="btnEn" onClick="submit_en()">提交(EN)</button>
</form>
</body>
<script type="text/javascript">
function submit_ch(){
document.formMulti.action="multiForm-ch.php"
document.formMulti.submit();
}
function submit_en(){
document.formMulti.action="multiForm-en.php"//提交多个表单的地址
document.formMulti.submit();
}
</script>
</html>
enctype是编码类型的意思
实例四、避免回车键自动提交表单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>避免回车键自动提交表单</title>
</head>
<body>
<form name="formNoEnter" method="get" action="form-no-enter.php">
<p>First Name:<input type="text" name="fname" id="id-fname" value="King"></p>
<p>Last Name:<input type="text" name="lname" id="id-lname" value="Wang"></p>
<button type="submit" id="id-submit">提交表单</button>
</form>
</body>
<script type="text/javascript">
window.onload=function(){
document.formNoEnter.onkeypress=function(ev){//document.formNoEnter(form的name值)
//onkeypress在用户按下并放开任何数字字母键时发生，系统按键无法识别,此处为无法识别回车键，所以不会按下回车不会触发
var ev=window.event||ev;//event表示事件的状态
if(ev.keyCode==13||ev.which==13){//keyCode的值对应键盘事件的内码，13为回车键
console.log("Info:press enter no submit.");
return false;
}
}
}
</script>
</html>
1.按照触发时机判断。
onkeyup在用户放开任何先前按下的键（包括系统按键，系统按键指箭头键，功能键）时发生；
onkeydown在用户按下任何键时发生；
onkeypress在用户按下并放开任何数字字母键时发生，系统按键无法识别。
2.响应时是否被系统接收。
onkeydown，onkeypress事件响应的时候输入的字符并没有被系统接收；
onkeyup响应的时候输入流已经被系统接收（包括输入系统按键时）。
实例五、按钮在单击后自动失效
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮在单击后自动失效</title>
</head>
<body>
<div>测试按钮:
<button id="id-click-once">Click Once</button>
</div>
<div>重新激活:
<button id="id-re-active">Re-Active</button>
</div>
</body>
<script type="text/javascript">
document.getElementById("id-click-once").onclick=function(e){
e.target.disabled=true;//document.getElementById("id-click-once").disabled=true两种写法//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口
//如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效
};
document.getElementById("id-re-active").onclick=function(e){
document.getElementById("id-click-once").disabled=false;
};
</script>
</html>
利用了disabled属性，当disabled=true时表示不能获取焦点，用户的所有操作都无效
实例六、为删除功能按钮添加确认提醒
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>为删除功能按钮添加确认提醒</title>
</head>
<body>
<button id="id-btn-confirm">
删除按钮
</button>
<p>删除按钮----删除内容</p>
</body>
<script type="text/javascript">
document.getElementById("id-btn-confirm").onclick=function(){
if(confirm("please confirm to del?")){//confirm提示框，当选择正确，if收到true则会执行下面语句
document.getElementsByTagName("p")[0].innerText=""//innerText改写p标签内的内容
}
}
</script>
</html>
1300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
