精华内容
下载资源
问答
  • JS写一个按钮

    2015-01-06 14:27:26
    曾经去163面试,不幸被刷掉。 笔试题有一道是这样的。一个通用的按钮 window.onload = function(){ var btn = new Btn(); btn.init({width:300}); bindEvent(bt

    曾经去163面试,不幸被刷掉。

    笔试题有一道是这样的。写一个通用的按钮

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="edge">
            <script>
            window.onload = function(){
                var btn = new Btn();
                btn.init({width:300});
                bindEvent(btn,'show',function(){
                    alert(1);
                })
                bindEvent(btn,'click',function(){
                    alert(2);
                })
    
                var oBtn = document.getElementById('btn');
                oBtn.onclick = function (){
                    fireEvent(btn,'show');
                }
    
            }
    
                function Btn(){
                    this.btn= null;
                    this.settings = {
                        width:200,
                        height:40,
                        borderRadius:6,
                        text :'按钮'
                    };
                }
                Btn.prototype.init = function (opt){
    
                    extend(this.settings,opt);
                    this.creat();
    
                }
                Btn.prototype.creat = function (){
                    this.btn =document.createElement('div');
                    
                    document.body.appendChild(this.btn);
                    this.btn.innerHTML = this.settings.text;
                    this.setData();
    
                }
                Btn.prototype.destory = function (){
                    document.body.removeChild(this.btn);
                }
                Btn.prototype.setData  = function (){
                    this.btn.style.width = this.settings.width +'px';
                    this.btn.style.height = this.settings.height +'px';
                    this.btn.style.border ='solid #f00 '+ this.settings.borderRadius +'px';
    
                }
            function extend(obj1,obj2){
                for(var attr in obj2){
                    obj1[attr] = obj2[attr];
                }
            }
            function bindEvent(obj,events,fn){
                obj.listeners = obj.listeners || {};
                obj.listeners[events] = obj.listeners[events] || [];
                obj.listeners[events].push( fn );
                if(obj.nodeType){
                    if(obj.addEventListener){
                        obj.addEventListener(events,fn,false);
                    }else{
                        obj.attachEvent('on'+events,fn);
                    }
    
                }
            }
            function fireEvent (obj,events){
                if(obj.listeners[events]){
                    for(var i in obj.listeners[events]){
                        obj.listeners[events][i]();
                    }
                }
            }
            </script>
        </head>
        <body>
        <a id="btn" style="margin-top: 40px;" >12</a>
        </body>
    </html>




    展开全文
  • Bootstrap-查询按钮和重置按钮

    万次阅读 2016-05-30 23:37:25
    1、问题背景 一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态2、实现源码 Bootstrap-查询按钮和重置按钮 ...

    1、问题背景

         一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态


    2、实现源码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>Bootstrap-查询按钮和重置按钮</title>
    		<link rel="stylesheet" href="../js/bootstrap-3.3.5/dist/css/bootstrap.css" />
    		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
    		<script type="text/javascript" src="../js/bootstrap-3.3.5/dist/js/bootstrap.js" ></script>
    		<script>
    			$(document).ready(function(){
    				//查询按钮事件
    				$("#searchBtn").off().on("click",function(){
    					var stuNo = $("#stuNo").val();
    					var stuName = $("#stuName").val();
    					alert("学生学号:"+stuNo+"\n学生姓名:"+stuName);
    					console.info(stuNo+"\n"+stuName);
    				});
    				
    				//重置按钮事件
    				$("#resetBtn").off().on("click",function(){
    					$("#stuNo").val("");
    					$("#stuName").val("");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div class="row" style="padding-top: 10px;">
    			<div class="col-xs-12">
    				<div class="col-xs-2">
    					<input type="text" class="form-control" id="stuNo" placeholder="请输入学号"/>
    				</div>
    				<div class="col-xs-2">
    					<input type="text" class="form-control" id="stuName" placeholder="请输入姓名"/>
    				</div>
    				<div class="col-xs-2">
    					<button class="btn btn-primary btn-sm" id="searchBtn">查询</button>
    					<button class="btn btn-sm" id="resetBtn">重置</button>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    3、实现结果

    (1)初始化



    (2)输入查询条件点击“查询”



    (3)点击“重置”


    展开全文
  • 求点击登陆按钮实现输出文字的js代码 最好还能给出跳转到指定页面的代码
  • 今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件。   代码非常简单,要完成这个功能,只需几行代码: //为keyListene...

    不得不说,在JS方面,自己真的是个不折不扣的菜鸟。对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得。今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件。

     

    代码非常简单,要完成这个功能,只需几行代码:

    	//为keyListener方法注册按键事件
    	document.onkeydown=keyListener; 
    
    	function keyListener(e){ 
    
    		//	当按下回车键,执行我们的代码
    		if(e.keyCode == 13){ 
    
    			//我们要做的事情
    
    		} 
    
    	} 
    

     

     

    额,貌似有点太简单了,就这样完成一篇博客,我都有点不好意思了。最后为大家附上一个小程序的实例吧:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>计算器</title>
    		<script type="text/javascript" >
    			function calculate() {		
    				var a = document.getElementById("pre-tax").value;
    				if (parseInt(a)>8000) {
    					document.getElementById("interest").value =800+ (a - 8000)*15/100;
    				} else {
    					document.getElementById("interest").value =a/10;
    				}		
    			}
    			
    			//为keyListener方法注册按键事件
    			document.onkeydown=keyListener; 
    
    			function keyListener(e){ 
    
    				//	当按下回车键,执行我们的代码
    				if(e.keyCode == 13){ 
    
    					calculate();
    
    				} 
    
    			} 
    		</script>
    	</head>
    	<body >
    		税前薪资:<input type="text" id="pre-tax"/>
    		<input type="button" id="calculate" value="计算" onclick="calculate()"/>
    		利息:<input type="text" id="interest" readonly="readonly"/>
    	</body>
    </html>

     

     

    这个小实例很简单,代码很好懂,但是代码背后的东西不是一般人能懂的。看懂的请举手.....

     

     

     

     

    展开全文
  • 今天主要给大家介绍下如何用js原生代码出全选、全不选、反选按钮。代码如下: Document 你的呢爱好很广泛!! 全选/全不选 足球 篮球 游泳 唱歌 // 处理全选 document....
    今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<h1>你的呢爱好很广泛!!</h1>
    	<br>
    	<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选
    	<br>
    	<input type="checkbox" name="items" value="足球">足球
    	<input type="checkbox" name="items" value="篮球">篮球
    	<input type="checkbox" name="items" value="游泳">游泳
    	<input type="checkbox" name="items" value="唱歌">唱歌
    	<br>
    	<input type="button" name="checkall" id="checkall" value="全选">
    	<input type="button" name="checkall" id="checkNo" value="全不选">
    	<input type="button" name="checkall" id="checkReverse" value="反选">
    	<script type="text/javascript">
    		
    		// 处理全选
    		document.getElementById('checkall').οnclick=function(){
    		/*************************************************/			
    			// 获取所有的复选框
    			var checkElements=document.getElementsByName('items');
    			for(var i=0;i<checkElements.length;i++){
    				var checkElement=checkElements[i];
    				// 方法一
    				// checkElement.setAttribute('checked',' checked');
    				// 方法二
    				checkElement.checked="checked";
    			}
    		}
    		/*************************************************/
    		// 处理全不选
    		document.getElementById('checkNo').οnclick=function(){
    			// 获取所有的复选框
    			var checkElements=document.getElementsByName('items');
    			for(var i=0;i<checkElements.length;i++){
    				var checkElement=checkElements[i];
    				// 方法一火狐不支持
    				// checkElement.setAttribute('checked',null);
    				// 方法二 火狐和ie都支持
    				checkElement.checked=null;
    			}
    		}
    /******************************************************************/
    		//反选
    		 document.getElementById('checkReverse').οnclick=function(){
    			// 获取所有的复选框
    			var checkElements=document.getElementsByName('items');
    			for(var i=0;i<checkElements.length;i++){
    				var checkElement=checkElements[i];
    				if (checkElement.checked) {
    					checkElement.checked=null;
    				}
    				else{
    					checkElement.checked="checked";
    				}
    				// 方法一
    				// checkElement.setAttribute('checked',null);
    				// 方法二 火狐和ie都支持
    				
    			}
    		}
    /***********************************************************/
    		//全选/不选
    		document.getElementById('checkItems').οnclick=function()
    		{
    		 // 获取所有的复选框
    			var checkElements=document.getElementsByName('items');
    			if (this.checked) {
    				for(var i=0;i<checkElements.length;i++){
    					var checkElement=checkElements[i];
    					checkElement.checked="checked";
    				}
    
    			}
    			else{
    				for(var i=0;i<checkElements.length;i++){
    					var checkElement=checkElements[i];
    					checkElement.checked=null;
    				}
    			}
    
    		}
    </script>
    </body>
    </html>

    展开全文
  • 本文实例讲述了JavaScript按钮绑定点击事件(onclick)的方法。分享给大家供大家参考。具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 html> head> script> function displayDate...
  • javascript修改按钮文本

    千次阅读 2020-05-12 18:37:18
    js里,点击button时改变button文字: document.getElementById("FirstPersonView").onclick = function(e) { //...... if(first_view_en) ...js不熟,用网上的几个方法都不行,这个是自己试过可以显示
  • script type="text/javascript"> var count = 1; //用来判断是删除 还是增加按钮 以便count值进行计算 function checkCount(boolOK, coun) { if (boolOK == true) { return count++; } e
  • JS按钮单击时,如何获得自己的ID? 其中加粗百的this是相对你的代度码增加的部分。 然后在你页面问的js一个函数如下:答 function test(element){ alert(element.id) } ...
  • JS按钮颜色切换

    千次阅读 2017-10-13 11:24:55
    按钮1 按钮2 按钮3 //设置背景颜色 //如果设置参数函数会节省函数数量吧 //设置flag+参数函数 flag = "btn1"; function btn1(){ document.getElementById("btn2").style.color = "black"; ...
  • 今天工作过程中遇到一个小问题,即实现购物按钮加减,单击数据+/-1,长按时会按时间来每秒+/-1。实现后如图所示: 购物按钮显示代码如下: <div class="input-group" style="width:146px;margin-left: 130px;"&...
  • JS按钮变色

    千次阅读 2018-07-10 17:05:45
    js: var _context_path = $("meta[name='_context_path']").attr("content"); function stop (id, stop) { var stop = stop == 1 ? 0 : 1; $.ajax({ url: '/catalog/kqUser/stop', data: {'kqId': id, '...
  • 初学Javascript按钮

    千次阅读 2018-05-05 15:33:37
    JavaScript能够对事件作出反应。比如对按钮的点击 ('北京欢迎你!')">点我! <h2>3、js直接写入html body中 document.write("这是一个标题</h1>"); document.write("这是一个段落</p>") <h2>4、找到元素改变内容 ...
  • js添加按钮

    2018-05-02 07:57:00
    <html> <head> <title></title> <script type="text/javascript"> function addButton(){ var html ="<input type=\"butt...
  • JavaScript按钮绑定点击事件-onCliek事件 <button type="submit" id="btn">btn</button> 1. 第一种: $("#btn").click(function(event){} 2. 第二种: document.getElementById('#foo')....
  • js禁用按钮及解除禁用

    万次阅读 2019-04-11 10:50:14
    给id为buttonSelect的按钮添加属性 $('#buttonSelect').attr("disabled",true); 给id为buttonSelect的按钮删除属性 $('#buttonSelect').attr("disabled",false);
  • [图片说明](https://img-ask.csdn.net/upload/201511/03/1446555987_95934.png)所有的条件都在form表单中,请问我点击查询的时候,用js有没有办法就是除了单选按钮以外,怎样验证其它选项必须输入一个条件
  • js 按钮 加载中

    千次阅读 2017-12-06 14:53:02
    按钮点击,显示加载中,并禁止点击,请求成功后恢复按钮
  • javascript 点击按钮 增加一个按钮

    千次阅读 2017-10-10 10:26:23
    "text/javascript" > function show (v){ document . getElementById ( "div" + v). style . display = "" ; } function hidden (v){ v. style . display = "none" ; } script >
  • js点击按钮实现弹框

    万次阅读 2019-03-04 09:34:01
    js点击按钮实现弹框 点击展示订单列表这个按钮的时候,弹出我是管理员这个弹框,点击确定可以实现跳转页面功能 &lt;body&gt; &lt;div class="group"&gt; &lt;input type="...
  • JavaScript点击按钮实现文件上传

    千次阅读 2020-05-22 09:39:50
    <!DOCTYPE HTML> <html> <head> <...script src="./jquery.min.js" type="text/javascript"></script> <title>点击按钮实现文件上传</title> </he..
  • js实现按钮的拖拽

    千次阅读 2019-06-28 16:28:46
    最近做了一个需求,要求实现客服按钮的拖拽效果。 本来以为只是一个简单的拖拽效果,最后做起来却发现在拖拽结束的时候会触发按钮的点击事件。 查了一些文章后解决了这个问题,下面贴上代码: html: <div ...
  • js按钮实现切换图片效果

    千次阅读 2019-11-01 23:02:41
    通过JavaScript设置按钮功能实现点击按钮切换上一张、下一张图片。(具体实现代码在图片后面)。 浏览器实现效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
  • 按钮Html代码如下: &lt;button type="button" class="ui_btn ui_org_btn" id="tel_btn" style="height: 43px"&gt;获取验证码&lt;/button...
  • js点击按钮切换盒子

    千次阅读 2018-06-09 11:02:39
    <script type="text/javascript"> var btn = document.querySelectorAll('button'); var show = document.querySelectorAll('.show>div'); for (var i=0;i;i++) { // 把当前按钮的下标保存,按下按钮...
  • JS控制按钮防止多次点击

    千次阅读 2017-11-23 10:49:28
    JS控制按钮防止多次点击
  • js简单按钮操作

    千次阅读 2018-03-09 16:29:14
    JS修改css样式 1.点击按钮改变宽度 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&...
  • js设置按钮的两种方式

    千次阅读 2019-08-27 10:48:50
    ①<button onclick="函数">按钮上的文字</button> ②<input type=button value='按钮上的文字' onclick="函数"> 注意input是单标记
  • JS在父页面子页面的按钮响应事件

    千次阅读 2016-09-15 17:01:03
    function buyApplyAttachedInfo.window.doUpload(){ if(id=="" && id==null){ jBox.tip("先保存主要信息"); } ...buyApplyAttachedInfo:父页面iframe的id的值 ...doUpload():子页面的按钮点击事件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 546,821
精华内容 218,728
关键字:

如何写js查询按钮