有趣的待解难题：一个按钮同时能完成两个动作吗？
下面是本人从网上找来的一段编号代码，此代码经几位网友的改进，现在很完善了，不过，我还想进一步改进，以便让自己与更多的初学者思考与学习。现在想改进的思路是：给此代码中的按钮“加”除了原友的加数功能外，还增加一个打印与否（带“打印”、“取消打印”两个按钮）的弹出窗体功能。但要注意，要打印的不是带编号的这个页面，而是另一个指定的页面。
一般来说，要给这个按钮增加新的功能，需改此代码中的script部分，也就是代码中着红色的部分：window.onload = function(){
document.getElementById('add').onclick = function(){
changeNum(1);} 。不过，加入弹出窗体代码后要么编号增加功能失效，要么弹出窗体功能不全。可能是一个按钮无法同时完成两种动作造成。本人只是莱鸟，提不出更高明的方案，只得求高手帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
body{
margin-top: 0px;
}
#counter{
color:#F00;
font-size:36px;
}
</style>
</HEAD>
<TD ALIGN="right"><FONT style="FONT-SIZE: 28pt; FONT-FAMILY: 宋体,"><font color="red"><script type="text/javascript">
var caution = false;
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "") ;
if (!caution || (name + "=" + escape(value)).length <= 4000)
document.cookie = curCookie
else
if (confirm("Cookie exceeds 4KB and will be cut!"))
document.cookie = curCookie
}
function getCookie(name) {
var prefix = name + "="
var cookieStartIndex = document.cookie.indexOf(prefix)
if (cookieStartIndex == -1)
return null
var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)
if (cookieEndIndex == -1)
cookieEndIndex = document.cookie.length
return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT"
}
}
function fixDate(date) {
var base = new Date(0)
var skew = base.getTime()
if (skew > 0)
date.setTime(date.getTime() - skew)
}
var now = new Date();
fixDate(now);
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
var totalLen = 6;
function changeNum(num){
var visits = getCookie("counter");
var str = ' ';
if (!visits || visits<=0){
visits = 1;
}else
{
visits =parseInt(visits)+num;
}
for(var i=0,len=visits.toString().length;i<totalLen-len;i++){
str += '0'; }
setCookie("counter", visits, now);
document.getElementById('counter').innerHTML = str+visits;
}
window.onload = function(){
document.getElementById('add').onclick = function(){
changeNum(1);
}
document.getElementById('reduce').onclick = function(){
changeNum(-1);
}
changeNum(0);
}
</script>
</font></font></TD>
<body>
<table >
<tbody>
<tr>
<td><input type="button" id="add" value="加"> <input type="button" id="reduce" value="减">
</td>
<td>
<div id="counter"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计数器</title>
<style type="text/css">
body{
margin-top: 0px;
}
#counter{
color:#F00;
font-size:36px;
}
.info{
height:70px;
widht:100%;
text-align:center;
margin-top:30px;
}
.buttons{
text-align:center;
}
</style>
</head>
<body>
<script type="text/javascript">
var caution = false;
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "") ;
if (!caution
[解决办法]
(name + "=" + escape(value)).length <= 4000)
document.cookie = curCookie
else
if (confirm("Cookie exceeds 4KB and will be cut!"))
document.cookie = curCookie
}
function getCookie(name) {
var prefix = name + "="
var cookieStartIndex = document.cookie.indexOf(prefix)
if (cookieStartIndex == -1)
return null
var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)
if (cookieEndIndex == -1)
cookieEndIndex = document.cookie.length
return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT"
}
}
function fixDate(date) {
var base = new Date(0)
var skew = base.getTime()
if (skew > 0)
date.setTime(date.getTime() - skew)
}
var now = new Date();
fixDate(now);
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
var totalLen = 6;
function changeNum(num){
var visits = getCookie("counter");
var str = ' ';
if (!visits
[解决办法]
visits<=0){
visits = 1;
}else{
visits =parseInt(visits)+num;
}
for(var i=0,len=visits.toString().length;i<totalLen-len;i++){
str += '0';
}
setCookie("counter", visits, now);
document.getElementById('counter').innerHTML = str+visits;
}
function cereateDiv(){
var url = '';
var div = document.createElement('div');
var cw = Math.max(document.body.clientWidth , document.documentElement.clientWidth);
var ch = Math.max(document.body.clientHeight , document.documentElement.clientHeight);
div.style.position = 'absolute';
div.style.width = '300px';
div.style.height = '200px';
div.style.border = '1px solid #000';
div.style.top = ch/2 - 100+'px';
div.style.left = cw/2 - 150+'px';
div.style.zIndex = 99;
document.body.appendChild(div);
var cover = div.cloneNode();
cover.style.width = cw + 'px';
cover.style.height = ch + 'px';
cover.style.border = 'none';
cover.style.background = '#ddd';
cover.style.top = '0px';
cover.style.left = '0px';
cover.style.position = 'absolute';
cover.style.zIndex = 98;
document.body.appendChild(cover);
cover.style.opacity = 0.8
cover.style.filter = 'alpha:(opacity=80)';
div.innerHTML = '<div class="info">确定打印？</div><div class="buttons"><input type="button" id="confirm" value="打印"/><input type="button" id="cancel" value="取消打印"/></div>'
document.getElementById('confirm').onclick = function(){
var target = window.open(url);
target.print();//这里不知道能不能打印成功，如果新打开的页面是自己可以控制的话，建议打印代码放在这个页面里
document.body.removeChild(cover);
document.body.removeChild(div);
}
document.getElementById('cancel').onclick = function(){
document.body.removeChild(cover);
document.body.removeChild(div);
}
}
window.onload = function(){
document.getElementById('add').onclick = function(){
changeNum(1);
cereateDiv();
}
document.getElementById('reduce').onclick = function(){
changeNum(-1);
}
changeNum(0);
}
</script>
<body>
<table >
<tbody>
<tr>
<td>
<input type="button" id="add" value="加"> <input type="button" id="reduce" value="减">
</td>
<td>
<div id="counter"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
