JavaScript按钮类的简单操作-优快云博客

本文介绍多种按钮交互方式，包括页面刷新、动态添加事件、响应选择变化、图片按钮、删除确认提示等功能，并涉及热键设置、状态栏信息更改、动态按钮添加及键盘事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮类：
1.页面刷新：
functionrenovates()
{
document.location.reload();
}
2.动态为按钮添加事件：
functionaddClick(obj)
{
obj.onclick=function()//绑定按钮的单击事件
{
alert('动态添加事件成功');//单击事件完成的功能－输出提示
}
}
<inputid="Button2"type="button"value="测试"/><inputid="Button1"type="button"value="为上面的按钮添加事件"onclick="addClick(Button2)"/>
3.选择不同的列表项就显示不同的按钮
functionbutSelect()
{
varselVal=document.getElementById("sel").value;
if(selVal=="1")
{
document.getElementById("td").innerHTML='<inputtype="button"value="按钮1"οnclick="btnc1();">';
}
elseif(selVal=="2")
{
document.getElementById("td").innerHTML='<inputtype="button"value="按钮2"οnclick="btnc2();">';
}
else
{
document.getElementById("td").innerHTML='';
}
}
functionbtnc1()
{
alert("单击了按钮1");
}
functionbtnc2(){
alert("单击了按钮2");
}
<td>
<selectonChange="butSelect();"id="sel">
<optionvalue="">
<optionvalue="1">but1
<optionvalue="2">but2
</select>
</td>
<tdid="td"></td>
4.图片式按钮；
functiongoTo()
{
varmyindex=document.myform.mailBox.selectedIndex//获取下拉框中的选择索引
location=document.myform.mailBox.options[myindex].value;//获取下拉框的选择值
}
<selectname="mailBox"size=1>
<optionselected>选项</option>
<optionvalue="http://www.163.net">163电子邮局</option>
<optionvalue="http://www.263.net">263电子邮局</option>
</select><br/>
<ahref="javascript:goTo()"mce_href="javascript:goTo()"onMouseOver="self.status='';returntrue"onMouseOut="self.status='';returntrue">
<imgsrc="按钮1.gif"mce_src="按钮1.gif"border=0align="middle"style="width:73px;height:40px"/></a>
5.删除时的确认提示；
<scriptlanguage="javascript">
functiondel()
{
if(confirm("确实要删除吗?"))
alert("已经删除！");
else
alert("已经取消了删除操作");
}
<script>
<inputid="Button1"type="button"value="删除"onclick="del()"/>
6.获取控件的绝对位置
functiongetAddress(e)
{
vart=e.offsetTop;
varl=e.offsetLeft;
while(ee=e.offsetParent)
{
t+=e.offsetTop;//获取X坐标
l+=e.offsetLeft;//获取Y坐标
}
alert("x坐标="+t+"y坐标为="+l);
}
<inputid="Button1"type="button"value="坐标"onclick="getAddress(this)"/>
7.定义热键；
<formaction="http://www.google.com"method="get"name="form1">
<inputtype="submit"accessKey="S"value="提交(Alt+s)">
8.更改状态栏信息；
<inputtype="button"value="修改状态栏"onClick="self.status='欢迎光临我们的工作室!';"name="button">
9.动态添加按钮；
functionaddInput()
{
varo=document.createElement("input");//使用DOM的创建元素方法
o.type="button";//设置元素的类型
o.value="按钮"+i++;//设置元素的值
o.attachEvent("onclick",addInput);//为控件添加事件
document.body.appendChild(o);//添加控件到窗体中
o=null;//释放对象
}
<bodyonload="addInput();">
10.按钮回车键=点击登录按钮；
<scriptlanguage="JavaScript">
functionkeyLogin()
{
if(event.keyCode==13)//回车键的键值为13
document.getElementById("input1").click();//调用登录按钮的登录事件
}
</script>
<bodyonkeydown="keyLogin();">
<inputid="input1"value="登录"type="button"onclick="alert('调用成功！')">