JavaScript实现给按钮加上双重动作的方法


Posted in Javascript onAugust 14, 2015

本文实例讲述了JavaScript实现给按钮加上双重动作的方法。分享给大家供大家参考。具体如下:

这里使用JavaScript给网页上按钮加入同时加入两个动作,一个是在文本框显示文字,另一个则是转向到某个网址,以往的按钮跳转都是单一的,这一个又在跳转时加入了将文字赋值给文本框的动作,搞懂了原理,就可以灵活运用了。

运行效果截图如下:

JavaScript实现给按钮加上双重动作的方法

在线演示地址如下:

具体代码如下:

<title>JavaScript给按钮加上双重动作</title>
<script language=JavaScript>
function jdk1x() {
  var num1 = document.x.jdk.value;
  if(num1 == 'three') {
  document.x.jdk.value = document.x.jdk.value
    }
  else {
  document.x.jdk.value = "三水点靠木欢迎您!"
    }
location="https://3water.com/"
 }
 </script>
<form name=x>
<input type=button value="三水点靠木" onClick="jdk1x()"><br>
<input type=text name=jdk width="300" onChange="document.x.jdk.value=''; return true">
</form>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS将秒换成时分秒实现代码
Sep 03 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
深入理解vue Render函数
Jul 19 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
详解jQuery中的元素的属性和相关操作
Aug 14 #Javascript
js实现人才网站职位选择功能的方法
Aug 14 #Javascript
jQuery入门基础知识学习指南
Aug 14 #Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 #Javascript
js实现Select列表各项上移和下移的方法
Aug 14 #Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 #Javascript
jQuery编程中的一些核心方法简介
Aug 14 #Javascript
You might like
php csv操作类代码
2009/12/14 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP加密解密实例分析
2015/12/25 PHP
php实现中文转数字
2016/02/18 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
三方协议书范本
2014/04/22 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
云台山导游词
2015/02/03 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
检讨书范文大全
2015/05/07 职场文书
刮痧观后感
2015/06/05 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
听课评课活动心得体会
2016/01/15 职场文书