javascript 像素拼图实现代码

更新时间：2009年04月20日 15:56:24 作者：

非常不错的像素拼图效果

<!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>JavaScript像素拼图游戏</title> <style type="text/css" media="all"> body{ margin:0px; padding:0px; background-color:#111111; font-family:Arial, Helvetica, sans-serif,"宋体"; } .container{ background-color:#CCCCCC; padding:0px 0px 0px 1px; width:609px; margin:0px auto; font-size:12px; height:auto; overflow:hidden; } .container .line,.container .line2{ width:100%; height:auto; overflow:hidden; } .container .line2 a{ color:#ababab; background-color:#666666; } .container a{ display:block; float:left; background-color:#999999; margin-right:1px; margin-top:1px; width:28px; text-align:center; padding:4px 0px; text-decoration:none; color:#FFFFFF; font-weight:bold; cursor:pointer; } .caption{ margin:0px auto; width:608px; height:auto; overflow:hidden; padding:1px; background-color:#CCCCCC; } .caption h2{ margin:0px; padding:3px; text-align:center; font-size:12px; background-color:#666666; } .caption ul{ margin:0px; padding:0px 16px; list-style:none; line-height:22px; font-size:12px; } .inputtxt{ width:30px; height:12px; font-size:12px; color:#FF6600; font-weight:bold; text-align:center; } .inputbutton{border:#666666 1px solid;height:18px;} .caption ul a{color:#333333;} .caption ul li{ border-bottom:#666666 1px dashed; } </style> <script language="javascript" type="text/javascript"> /*=================== copyright:http://www.wxwdesign.cn 转载请保留此信息和作者网站链接 ====================*/ window.onload=function(){ var n=22; //默认行数 var L=23; //默认每行显示个数 var acontent="+"; //默认方格里显示的符号 var color=new Array("#ea991f","#cc994b","#ae9979","#999999"); var init=function(num,len){ var content=document.createDocumentFragment(); var firstline=document.createElement("div"); firstline.className="line2"; for(var i=0;i<len;i++){var a=document.createElement("a");a.innerHTML=i+1;firstline.appendChild(a)} content.appendChild(firstline); for(var i=0;i<num;i++){var div=document.createElement("div");div.className="line";for(var j=0;j<len;j++){var a=document.createElement("a");a.innerHTML=acontent;div.appendChild(a);};content.appendChild(div);} getid("container").style.width=String(29*len)+"px"; getid("caption").style.width=String(29*len-1)+"px"; getid("container").appendChild(content); var a=document.getElementsByTagName("a"); for(var i=21;i<a.length;i++){ a[i].onclick=function(){if(!this.i){this.style.color="#ff0000";this.style.backgroundColor="#FF9900"}else{this.style.color="#FFFFFF";this.style.backgroundColor="#999999"};this.i=!this.i} a[i].onfocus=function(){this.blur()} a[i].onmouseover=function(){this.style.backgroundColor="#FF9900"} a[i].onmouseout=function(){var obj=this;var j=0;function dc(){if(j<color.length&&!obj.i){setTimeout(dc,200);obj.style.backgroundColor=color[j];j++}};dc()}; }} init(n,L); function getid(id){return document.getElementById(id)} var input=document.getElementsByTagName("input"); input[0].onclick=function(){window.location.reload()} input[3].onclick=function(){getid("container").innerHTML="";init(parseInt(input[2].value),parseInt(input[1].value))} } </script> </head> <body> <div class="container" id="container"></div> <div class="caption" id="caption"> <h2>说明</h2> <ul> <li>1.移动鼠标在网页方格里点击，拼出图形。</li> <li>2.如果对某个点不满意，再次点击，即可消除。</li> <li>3.如果想重新开始，请点击这里：<input type="button" value="重新开始" class="inputbutton"/> 或者重新设置：<input type="text" class="inputtxt"/> 列 <input type="text" class="inputtxt" /> 行 <input type="button" value="重新生成" class="inputbutton" /></li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS获取和修改元素样式的实例代码
下面小编就为大家带来一篇JS获取和修改元素样式的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JavaScript Date 知识浅析
这篇文章主要介绍了JavaScript Date 知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-01-01
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
这篇文章主要介绍了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法,涉及javascript窗口的相关操作函数与使用技巧,需要的朋友可以参考下
2017-09-09
Javascript 命名空间模式
命名空间是通过为项目或库创建一个全局对象，然后将所有功能添加到该全局变量中。通过减少程序中全局变量的数量，实现单全局变量，从而在具有大量函数、对象和其他变量的情况下不会造成全局污染，同时也避免了命名冲突等问题
2013-11-11
js将字符转换为UTF-8字符的工具
在下面的文本框中输入中文文字，按“转化”，即可将其转化为UTF-8字符。
2010-06-06
js获取浏览器的可视区域尺寸的实现代码
js获取浏览器的可视区域尺寸的实现代码，需要的朋友可以参考下。
2011-11-11
JavaScript检查数据中是否存在相同的元素（两种方法）
这篇文章主要介绍了JavaScript检查数据中是否存在相同的元素（两种方法）,需要的朋友可以参考下
2018-10-10
javascript的console.log()用法小结
console.log 原先是 Firefox 的专利，严格说是安装了 Firebugs 之后的 Firefox 所独有的调试绝招
2012-05-05
Three.js实现3D乒乓球小游戏(物理效果)
本文将使用React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏，使用 React Three Fiber 搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等，最后利用上述知识点，将开发一个简单的乒乓球小游戏,需要的朋友可以参考下
2023-03-03
用javascript做拖动布局的思路
这几天不是很忙，就找了些拖动布局方面的资料看看，也学着写了个拖动布局的效果，没想到花了好多时间，七拼八凑，总算是把这个效果写出来了。哎！还是js的功夫太差。因为是边找资料边写的，很多地方印象不深，时间一长，再重新写估计也难，所以把当时的思路记录一下！也希望大虾指点一下！
2008-05-05

javascript 像素拼图实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具