📄 page01.htm
字号:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
var count=0;
var repeat;
var bsize=20;
var bcolor='#FFFFFF';
var bkcolor='menu';
function creat() {
if (count==1) {
var x1=document.body.scrollLeft+event.clientX-bsize/2;
var y1=document.body.scrollTop+event.clientY-bsize/2;
if (y1>22 && y1<275) {drawfield.innerHTML+="<div style='position:absolute; width:"+bsize+"; height:"+bsize+"; z-index:1; left: "+x1+"; top: "+y1+"; background-color: "+bcolor+"; border: 1px none #000000' class='ball' onmouseup=clear()></div>";}
repeat=setTimeout("creat",50);}
}
function remove() {
count=0;
clearTimeout(repeat);
}
function init() {
count=1;
}
function brushsize(selObj,restore){
bsize=selObj.options[selObj.selectedIndex].value;
if (restore) selObj.selectedIndex=0;
}
var count2=0;
function setvalue() {
if (count2==1) {
if (setsize.value>19&&setsize.value<101) {bsize=setsize.value;count2=0;}
else alert("喷枪大小范围应为20px~100px");count=0;}
}
var count3=0;
function setvalue2() {
if (count3==1) {
if (setcolor.value>'000000'&&setcolor.value<'fffffg') {bcolor='#'+setcolor.value;count3=0;}
else alert("请使用十六进制FFFFFF格式");count=0;}
}
function save() {
var newwindow=window.open("about:blank","yourdraw","width="+drawfield.offsetWidth+",height=275");
newwindow.document.write("<html><head><style type=text/css>.ball { filter: Alpha(Opacity=100, FinishOpacity=0, Style=2)}</style><link rel=stylesheet href=test.css type=text/css></head><body bgcolor="+bkcolor+" leftmargin=0 topmargin=0>"+drawfield.innerHTML+"</body></html>");
}
// -->
</script>
<style type="text/css">
<!--
.ball { filter: Alpha(Opacity=100, FinishOpacity=0, Style=2)}
-->
</style>
<link rel="stylesheet" href="images/test.css" type="text/css">
</head>
<body bgcolor="menu" text="#000000" onmousemove=creat() onmouseup=remove() leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onselectstart="return false;">
<table id=control width="100%" border="0" cellspacing="0" cellpadding="0" class="borderon">
<tr>
<td height="20" width="80"><nobr class="tden"> Airbrush</nobr></td>
<td width="20" align="center">
<div class=button onclick="bsize='20';setsize.value='20'" title="20px的喷枪"><span class=tden style="height:15px">20</span></div>
</td>
<td width="20" align="center">
<div class=button onclick="bsize='30';setsize.value='30'" title="30px的喷枪"><span class=tden style="height:15px">30</span></div>
</td>
<td width="20" align="center">
<div class=button onclick="bsize='50';setsize.value='50'" title="50px的喷枪"><span class=tden style="height:15px">50</span></div>
</td>
<td width="20" align="center">
<div class=button onclick="bsize='100';setsize.value='100'" title="100px的喷枪"><span class=tden style="height:15px">100</span></div>
</td>
<td width="40" align="center">
<input type="text" name="setsize" style="width:30px;height:18px" class="tden" onclick="count2=1;this.value=''" onblur="setvalue()" title="在此输入喷枪大小的数值">
</td>
<td width="10" align="center">
<table width="2" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" align="center" bgcolor="#808080"><img src="images/spacer.gif" width="1" height="15"></td>
<td width="1" align="center" bgcolor="#FFFFFF"><img src="images/spacer.gif" width="1" height="15"></td>
</tr>
</table>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#FFFFFF';setcolor.value='FFFFFF'" oncontextmenu="bkcolor='#FFFFFF';drawfield.bgColor='#FFFFFF';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#FFFFFF"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#CCCCCC';setcolor.value='CCCCCC'" oncontextmenu="bkcolor='#CCCCCC';drawfield.bgColor='#CCCCCC';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#CCCCCC"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#666666';setcolor.value='666666'" oncontextmenu="bkcolor='#666666';drawfield.bgColor='#666666';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#666666"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#000000';setcolor.value='000000'" oncontextmenu="bkcolor='#000000';drawfield.bgColor='#000000';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#000000"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#FF0000';setcolor.value='FF0000'" oncontextmenu="bkcolor='#FF0000';drawfield.bgColor='#FF0000';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#FF0000"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#00FF00';setcolor.value='00FF00'" oncontextmenu="bkcolor='#00FF00';drawfield.bgColor='#00FF00';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#00FF00"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#0000FF';setcolor.value='0000FF'" oncontextmenu="bkcolor='#0000FF';drawfield.bgColor='#0000FF';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#0000FF"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#00FFFF';setcolor.value='00FFFF'" oncontextmenu="bkcolor='#00FFFF';drawfield.bgColor='#00FFFF';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#00FFFF"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#FF00FF';setcolor.value='FF00FF'" oncontextmenu="bkcolor='#FF00FF';drawfield.bgColor='#FF00FF';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#FF00FF"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onclick="bcolor='#FFFF00';setcolor.value='FFFF00'" oncontextmenu="bkcolor='#FFFF00';drawfield.bgColor='#FFFF00';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td bgcolor="#FFFF00"><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td align="center" width="20">
<div class=button style="width:12px" onClick="bcolor='menu';setcolor.value='menu'" oncontextmenu="bkcolor='menu';drawfield.bgColor='menu';return false;" title="左键前景色，右键背景色">
<table width="10" border="0" cellspacing="0" cellpadding="0" class="borderall">
<tr>
<td><img src="images/spacer.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</td>
<td width="70" align="center">
<input type="text" name="setcolor" style="width:60px;height:18px" class="tden" onClick="count3=1;this.value=''" onblur="setvalue2()" value="FFFFFF" title="在此输入十六进制前景色">
</td>
<td width="10" align="center">
<table width="2" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" align="center" bgcolor="#808080"><img src="images/spacer.gif" width="1" height="15"></td>
<td width="1" align="center" bgcolor="#FFFFFF"><img src="images/spacer.gif" width="1" height="15"></td>
</tr>
</table>
</td>
<td align="center"> </td>
<td align="center" width="20">
<div class=button onClick="drawfield.innerHTML=''" title="清除" style="width:16px">×</div>
</td>
<td align="center" width="20">
<div class=button onClick="save()" title="保存" style="width:16px">√</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=drawfield height=275 onmousedown=init()> </td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -