HTML中怎么用一个按钮进行链接

HTML中怎么用一个按钮进行链接,第1张

在HTML可以给元素设置一个超链接的。

工具原料:编辑器、浏览器。

1、解决的思路就是先写一个button标签,标签的按钮名字可以自定义,然后将这个按钮放在超链接的a标签里,代码如下:

<body>

    <a href="test.html">

        <button>test</button>

    <中州如/a>

</body>

2、button的名称可以修改成自己任意的,链接也可以自定义,运行的效果如下卖启图:

3、也可以将其他的元素放到a标签中间实现超链接的功迹蔽能。

<html>

<head>

<title>简易计算器</title>

<script>

function display(val){

var display = document.getElementById("display")

display.value += val

}

function result(){

var display = document.getElementById("display")

var res = eval(display.value)

display.value = res

}

function toClear(){

document.getElementById("display").value = ""

window.onload = function(){

  document.onkeydown = function(e){

     e = e || event

     var keyCode = e.keyCode

     //alert(keyCode)

    var shiftKey = e.shiftKey

    if(shiftKey){ //shift + 按键

      switch(keyCode){

        case 56:

         display("*")

         break

       case 187:

          display("+")

          break

      }

    }else{ //普通按键

      switch(keyCode){

        case 48:

        case 49:

        case 50:

        case 51:

 模大誉       case 52:

        case 53:

        case 54:

        case 55:

        case 56:

        case 旦段57:

          display(keyCode - 48)

          break

        case 67:

          toClear()

          break

        case 106:

         display("*")

         break

        case 107:

          display("+")

          break

        case 109:

        case 189:

          display("-")

          break

        case 111:

   仿弯     case 191:

          display("/")

          break

        case 187:

          result()

          break

      }

    }

  }

}

</script>

<style type="text/css">

input {

height: 2.5em

width: 5em

}

input#display {

width:100%

}

</style>

</head>

<body>  

<table border="1" align="center" frame="box" rules="all">

<tr>

<td colspan="3"><input type="text" id="display" disabled /></td>

<td>

<input name="按钮" type="button" onClick="result()" value="计算" /> </td>

</tr>

<tr>

<td><input type="button" value="7" onClick="display(this.value)" /></td>

<td><input type="button" value="8" onClick="display(this.value)" /></td>

<td><input type="button" value="9" onClick="display(this.value)" /></td>

<td><input type="button" value="+" onClick="display(this.value)" /></td>

</tr>

<tr>

<td><input type="button" value="4" onClick="display(this.value)" /></td>

<td><input type="button" value="5" onClick="display(this.value)" /></td>

<td><input type="button" value="6" onClick="display(this.value)" /></td>

<td><input type="button" value="-" onClick="display(this.value)" /></td>

</tr>

<tr>

<td><input type="button" value="1" onClick="display(this.value)" /></td>

<td><input type="button" value="2" onClick="display(this.value)" /></td>

<td><input type="button" value="3" onClick="display(this.value)" /></td>

<td><input type="button" value="*" onClick="display(this.value)" /></td>

</tr>

<tr>

<td><input type="button" value="." onClick="display(this.value)" /></td>

<td><input type="button" value="0" onClick="display(this.value)" /></td>

<td><input type="button" value="C" onClick="toClear()" /></td>

<td><input type="button" value="/" onClick="display(this.value)" /></td>

</tr>

</table>

</body>

</html>

其实主要就是加个键盘事件监听,这里用的keydown,改成keyup亦可,然后主要是了解思想,代码仅供参考


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11994306.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存