Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > javascript 像素拼图实现代码_javascript技巧

javascript 像素拼图实现代码_javascript技巧

WBOY

Freigeben： 2016-05-16 18:54:04

Original

1241 Leute haben es durchsucht

<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> 
 
 
<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Verwandte Etiketten：

javascript

Quelle：php.cn

Vorheriger Artikel：js 拖拽翻页实现代码_javascript技巧 Nächster Artikel：jquery 实现的全选和反选_jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...

Aus 2024-04-06 19:25:49

0

1

505

Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...

Aus 2024-04-06 18:16:26

0

1

403

JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

Aus 2024-04-06 15:35:24

0

1

274

Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...

Aus 2024-04-06 14:54:03

0

2

421

Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...

Aus 2024-04-06 12:53:11

0

1

376

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage