JavaScript按钮类的简单操作

Excuse110 2012-10-12

展开全文

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