⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 button.html

📁 JavaScript Button Demo
💻 HTML
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style>
.js_btn_def_1 {float:left; cursor:pointer; height:28px}

</style>
<script language="javascript">
function js_btn(name,width,text,onclick,skin) {
	var _name=name,_width=width,_skin=skin,btn,_text=text;
	if(_skin==null)
		_skin='def';
	init();
	
	return {
		width: function(int) {if(int==null){return _width}else{_width=int;btn.style.width=int+'px'}},
		text: function(str) {document.getElementById(_name).innerHTML=str;},
		skin: switchskin,
		switchpos: switchpos
	}

	function init() {
		document.write(
		'<div id="'+_name+'" class="js_btn_'+_skin+'_1" style="width:'+_width+'px">'+	
'<div id="'+_name+'_down" style="position:absolute; height:inherit; width:inherit; z-index:1">'+
'<div style="background:url(btn_down.png) 0px 0px; width:8px; float:left; height:inherit"></div>'+
'<div style="background:url(btn_down.png) 8px 0px; width:8px; float:right; height:inherit"></div>'+
'<div style="padding-left:8px; padding-right:8px; height:inherit"><div style="background:url(btn_down.png) 0px -28px; height:inherit"><div id="'+_name+'_text" style="padding-top:7px; font-weight:bold; text-align:center; font-family:Arial, Helvetica, sans-serif; color:#EEEEEE; font-size:14px; padding-left:1px">'+_text+'</div></div></div>'+
'</div>'+
'<div id="'+_name+'_over" style="position:absolute; height:inherit; width:inherit; z-index:2">'+
'<div style="background:url(btn_over.png) 0px 0px; width:8px; float:left; height:inherit"></div>'+
'<div style="background:url(btn_over.png) 8px 0px; width:8px; float:right; height:inherit"></div>'+
'<div style="padding-left:8px; padding-right:8px; height:inherit"><div id="btnm" style="background:url(btn_over.png) 0px -28px; height:inherit"><div id="'+_name+'_text" style="padding-top:6px; font-weight:bold; text-align:center; font-family:Arial, Helvetica, sans-serif; color:#EEEEEE; font-size:14px">'+_text+'</div></div></div>'+
'</div>'+
'<div id="'+_name+'_up" style="position:absolute; height:inherit; width:inherit; z-index:3">'+
'<div style="background:url(btn_up.png) 0px 0px; width:8px; float:left; height:inherit"></div>'+
'<div style="background:url(btn_up.png) 8px 0px; width:8px; float:right; height:inherit"></div>'+
'<div style="padding-left:8px; padding-right:8px; height:inherit"><div id="btnm" style="background:url(btn_up.png) 0px -28px; height:inherit"><div id="'+_name+'_text" style="padding-top:6px; font-weight:bold; text-align:center; font-family:Arial, Helvetica, sans-serif; color:#DDDDDD; font-size:14px">'+_text+'</div></div></div>'+
'</div>'+
'<div style="position:absolute; height:inherit; width:inherit; z-index:4" onMouseOver="'+_name+'.switchpos(\'over\')" onMouseOut="'+_name+'.switchpos(\'up\')" onMouseDown="'+_name+'.switchpos(\'down\')" onMouseUp="'+_name+'.switchpos(\'over\')">'+
'</div>'+
		'</div>');
		btn = document.getElementById(_name);
		btn.setAttribute('onclick',onclick);
	}
	
	function switchskin(skin) {
		document.getElementById('btnl'+_name).style.backgroundImage='url(btn_'+skin+'.png)';
		document.getElementById('btnr'+_name).style.backgroundImage='url(btn_'+skin+'.png)';
		document.getElementById('btnm'+_name).style.backgroundImage='url(btn_'+skin+'.png)';
	}
	
	function switchpos(pos) {
		showpos(_name,pos);
		if(pos=='over') {
			hidepos(_name,'down');
			hidepos(_name,'up');
		} else if(pos=='down') {
			hidepos(_name,'over');
			hidepos(_name,'up');
		} else if(pos=='up') {
			hidepos(_name,'down');
			hidepos(_name,'over');
		}
	}
	
	function hidepos(name,pos) {
		document.getElementById(name+'_'+pos).style.visibility = 'hidden';
	}
	
	function showpos(name,pos) {
		document.getElementById(name+'_'+pos).style.visibility = 'visible';
	}
}

var btn1 = new js_btn('btn1',150,'My Button','alert("Hello World!")');
var btn2 = new js_btn('btn2',200,'Another Button','alert("What\'s Up?")');
//btn.height(60);

</script>
<br><br>
<script language="javascript">
var btn3 = new js_btn('btn3',50,'Small','alert("Hello World!")');
var btn4 = new js_btn('btn4',300,'Large','alert("What\'s Up?")');
</script>


</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -