JavaScript按钮类的简单操作javascript

/ / 2017-08-25 阅读：2512

按钮类： 1.页面刷新： function renovates() { document.location.reload(); &...

按钮类：
1.页面刷新：
function renovates()
{
document.location.reload();
}

2.动态为按钮添加事件：
function addClick(obj)
{
obj.onclick=function() //绑定按钮的单击事件
{
alert('动态添加事件成功 '); //单击事件完成的功能－输出提示
}
}
<input id="Button2" type="button" value=" <a href="http://lib.csdn.net/base/softwaretest" class='replace_word' title="软件测试知识库" target='_blank' style='color:#df3434; font-weight:bold;'>测试</a>" /><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<a href="http://lib.csdn.net/base/dotnet" class='replace_word' title=".NET知识库" target='_blank' style='color:#df3434; font-weight:bold;'>.NET</a>">163电子邮局</option>
<option value="http://www.263<a href="http://lib.csdn.net/base/dotnet" class='replace_word' title=".NET知识库" target='_blank' style='color:#df3434; font-weight:bold;'>.net</a>">263电子邮局</option>
</select><br />
<a href="<a href="http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>: goTo()" mce_href="<a href="http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>javascript</a>: 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('调用成功！')">

上一篇：JavaScript文本框的操作

下一篇：超链接 javascript:void(0),点击超链接

阅读延展

JavaScript按钮类的简单操作javascript

我要评论

最新评论