JavaScript按钮类的简单操作

最新推荐文章于 2023-07-28 16:12:32 发布

清山博客

最新推荐文章于 2023-07-28 16:12:32 发布

阅读量3.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript button function input .net border

本文链接：https://blog.csdn.net/a497785609/article/details/4483414

版权

JavaScript 专栏收录该内容

85 篇文章 0 订阅

订阅专栏

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

2.动态为按钮添加事件：
  function addClick(obj)
  {
    obj.οnclick=function()       //绑定按钮的单击事件
    {
      alert('动态添加事件成功 ');  //单击事件完成的功能－输出提示
    }
  }
<input id="Button2" type="button" value=" 测试" /><input id="Button1" type="button" value="为上面的按钮添加事件" οnclick="addClick(Button2)" />

3. 选择不同的列表项就显示不同的按钮
function butSelect()
	 {
	   var selVal = document.getElementById("sel").value;
	   if(selVal == "1")
	   {
	     document.getElementById("td").innerHTML = '<input type="button" value="按钮1" οnclick="btnc1();">';
	   }
	   else if(selVal == "2")
	   {
	     document.getElementById("td").innerHTML = '<input type="button" value="按钮2" οnclick="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.net">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="删除" οnclick="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="坐标" οnclick="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 οnlοad="addInput();"> 

10.按钮回车键=点击登录按钮；
<script language="JavaScript">
 function keyLogin()
 {
  if (event.keyCode==13)   //回车键的键值为13
     document.getElementById("input1").click();  //调用登录按钮的登录事件
 }
</script>

<body οnkeydοwn="keyLogin();">
<input id="input1" value="登录" type="button" οnclick="alert('调用成功！')">

清山博客

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript按钮类的简单操作

按钮类：1.页面刷新： function renovates() { document.location.reload(); }2.动态为按钮添加事件： function addClick(obj) { obj.onclick=function() //绑定按钮的单击事件 { alert(
复制链接

扫一扫