JavaScript按钮类的简单操作

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

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

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

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

<body onkeydown="keyLogin();">
<input id="input1" value="登录" type="button" onclick="alert('调用成功!')">

时间: 2024-11-10 10:25:56

JavaScript按钮类的简单操作的相关文章

基于javascript实现表格的简单操作_javascript技巧

本文实例为大家分享了js表格操作的简单方法,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>zzzz</title> <style> *{ margin: 0; padding: 0; } body{ width: 1000px; margin: 100px auto; font-family: &qu

枚举类的简单操作

直接代码吧 package com.jlife.sys.basepojo; /** * Created by chenjianan on 2017/3/1-19:16. * * email 122741482@qq.com * * Describe:数据权限范围 * * DATA_SCOPE_ALL("所有数据"), * DATA_SCOPE_COMPANY_AND_CHILD("所在公司及以下数据"), * DATA_SCOPE_COMPANY("所在公

javascript 表格内容排序 简单操作示例代码_javascript技巧

复制代码 代码如下: <div id="html"></div> <script> var listInfos = new Array(); listInfos[0] = new Array(); listInfos[0][0] = {'name':'推荐页1','DayCount':666,'AvgTime':29872,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'D

Javascript 创建类并动态添加属性及方法的简单实现_javascript技巧

JavaScript 是一种很强的面向对象的语言,支持创建实例之后再添加属性和方法,虽然是小技巧,用的时候容易忘记,今天写了一个很小的例子,记录在这里,仅供参考. function MyClass() { //This function is same as a constructer alert("New Object Created"); } //Creating Object var MyObject = new MyClass (); NewObject.prototype =

php简单操作mysql数据库的类_php技巧

本文实例讲述了php简单操作mysql数据库的类.分享给大家供大家参考.具体如下: <?php /** * Database class * * @version: 2.2 * @revised: 27 may 2007 * **/ class Database { var $host; var $name; var $user; var $pass; var $prefix; var $linkId; function Database($mysql) { foreach($mysql as

java 利用java反射机制动态加载类的简单实现_java

如下所示: ////////////////// Load.java package org.bromon.reflect; import java.util.ArrayList; import java.util.List; public class Load implements Operator { @Override public List<?> act(List<?> params) { // TODO Auto-generated method stub List<

轻量函数式 JavaScript:八、列表操作

你在前一章闭包/对象的兔子洞中玩儿的开心吗?欢迎回来! 如果你能做很赞的事情,那就反复做. 我们在本书先前的部分已经看到了对一些工具的简要引用,现在我们要非常仔细地看看它们,它们是 map(..).filter(..).和 reduce(..).在 JavaScript 中,这些工具经常作为数组(也就是"列表")原型上的方法使用,所以我们很自然地称它们为数组或列表操作. 在我们讨论具体的数组方法之前,我们要在概念上检视一下这些操作是用来做什么的.在这一章中有两件同等重要的事情:理解列表

[译]JavaScript 让 Monad 更简单(软件编写)(第十一部分)

本文讲的是[译]JavaScript 让 Monad 更简单(软件编写)(第十一部分), 原文地址:JavaScript Monads Made Simple 原文作者:Eric Elliott 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:yoyoyohamapi 校对者:IridescentMia WJoan Smoke Art Cubes to Smoke - MattysFlicks - (CC BY 2.0) (译注:该图是用 PS 将烟雾

JavaScript进阶练习及简单实例分析_javascript技巧

当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo