html5文本框內容互換代碼



211 842 281



特效描述:html5 文本框內容互換,html5文本框內容互換代碼

代碼結構

1. HTML代碼

<script type="text/javascript">
 function change(){
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
{
   document.getElementById("num2").value = num1;
   document.getElementById("num1").value = num2;
  }
 }
</script>
<style type="text/css">
	body{ font-family: "Microsoft YaHei";font-size: 14px;line-height: 28px;}
	input {
    width: 217px;
    height: 28px;
    padding-left: 6px;
    border-color: #BBB #DDD #DDD #BBB;
    box-shadow: 1px 1px 1px #DDD inset;
    line-height: 28px;
    padding: 0 5px;
    border: 1px solid #ccc;
    font-size: 12px;
    outline: medium none; font-size: 12px;
    outline: none;
}
	.huan{ border-radius: 15px; width: 28px; height: 28px; background: url(images/h.png);  border: 1px solid #ccc; box-shadow: 0px 0px 0px #fff inset;}
		.huan:hover{  box-shadow: 1px 1px 1px #DDD inset;}
</style>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
   <tbody>
     <tr>
       <td align="center">出發城市</td>
       <td align="center"><input type="text" name="num1" id="num1" value="西安(SIA)"></td>
       <td align="center"><input type="button" onClick="change()"  class="huan" value=""></td>
       <td align="center">到達城市</td>
       <td align="center"><input type="text" name="num2" id="num2" value="北京(BJS)"></td>
     </tr>
  </tbody>
</table>
<p  style="text-align: center">點擊中間的切換按鈕,城市內容互換</p>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 文字切換 文字選項卡 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表