hujung hadapan webtutorial jsCipta teka-teki jigsaw yang boleh disesuaikan dengan jQuery_jquery
Saya telah mengehadkan saiz kepada 3-10 Jika anda benar-benar bebas atau mempunyai kecenderungan untuk menyalahgunakan diri sendiri, anda boleh cuba menukarnya. .
Saya bercadang untuk menyiarkan gambar, tetapi saya belum melakukannya lagi..
pintu.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">
#pt_main{
margin:0 auto;
border:2px solid #000;}
#menu{
text-align:center;}
#pt_main div{
padding:0px;
margin:0px;
float:left;
line-height:200px;
font-size:100px;
text-align:center;}
#pt_main div:hover{
cursor:pointer;}
.hui{
background:#CCC;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//div边框宽度
var border_w=2;
//div大小
var size=50;
//是否过关
var st=false;
//背景图片地址（功能还没写）
var imgurl='';
//灰色块的位置
var hui=0;
//游戏宽高
var width=3;
var height=3;
$(function(){
init();
});
//判断两个数字能不能交换
function ut_jh(a,b){
if(Math.abs(a-b)==width){
return true;
}
if(Math.abs(a-b)==1&& ut_line(a,b,width) ){
return true;
}
return false;
}
//判断两个数字是否在同一行
function ut_line(a,b,width){
if(parseInt(a/width)==parseInt(b/width)){
return true;
}else{
return false;
}
}
//生成可交换的集合（可与灰色块交换的集合）
function ut_sc(a){
//最多为4个
var li=new Array();
var i=0;
if(a-width>=0){
li[i++]=a-width;
}
if(a+width<=width*height-1){
li[i++]=a+width;
}
if(ut_line(a,a-1,width) && a-1>=0){
li[i++]=a-1;
}
if(ut_line(a,a+1,width) && a+1<=width*height-1){
li[i++]=a+1;
}
//alert(a+'-length:'+li.length)
return li;
}
//块的点击事件
function pt_click(){
if(!st){
return false;
}
//点击块的索引
var index=get().index($(this));
if(ut_jh(hui,index)){
jh(hui,index);
//判断是否过关
pd();
}
}
//两块交换
function jh(hui_,index_){
//alert(hui+1+","+(index_+1));
var list=get();//所有块
var h=list.eq(hui_);//灰色块
var d=list.eq(index_);//点击的块
//交换样式
h.removeClass();
d.addClass('hui');
h.html(d.html());
d.html('');
hui=index_;
//交换各自属性
tg=h.attr('tg');
h.attr('tg',d.attr('tg'));
d.attr('tg',tg);
}
function init(){
//不能太小...
if(width<3||height<3){
return false;
}
hui=width*height-1;
var pp=$("#pt_main");
pp.html('');
//创建并初始化
var k=width*size+border_w*width*2;
var g=height*size+border_w*height*2;
pp.css({'width':k,'height':g});
for(i=0;i<width*height;i++){
var n=$("<div>"+(i+1)+"</div>");
n.css({'width':size,
'height':size,
border:border_w+'px solid #000',
lineHeight:size+'px',
fontSize:parseInt(size/3)+'px'
});
if(imgurl!=''){
}
pp.append(n);
//alert(i)
}
get().last().html('');
get().last().addClass('hui');
get().on('click',pt_click);
//为每个块附加属性，记录当前的值
$("#pt_main div").each(function(index, element) {
$(element).attr('tg',index);
});
dl();
st=true;
}
//判断是否通过(当每个块的值与自身的下标对应)
function pd(){
var b=true;
get().each(function(index, element) {
if($(element).attr('tg')!=index){
b=false;
return false;
}
});
if(b){
st=false;
alert("恭喜过关！");
return true;
}else{
return false;
}
}
//获取集合
function get(){
return $("#pt_main div");
}
//打乱
function dl(){
//打乱次数
var count=width*width*width;
for(i =0;i<count;i++){
//可交换集合
var li=ut_sc(hui);
var num=parseInt((li.length)*Math.random());
jh(hui,li[num]);
}
}
//初始化按钮的点击事件
function csh(){
var dxv=$('#dx').val();
if(!parseInt(dxv)){
alert('请输入3-10之间的数字');
$('#dx').val('');
return false;
}
var v=parseInt(dxv);
if(v<3||v>10){
alert('请输入3-10之间的数字');
$('#dx').val('');
return false;
}
width=v;
height=v;
init();
}
</script>
</head>
<body>
<div id='menu'>
大小:<input id='dx' style="text-align:center;width:40px;"/>
<button onclick="csh()">初始化</button>
<button onclick="init()">刷新</button>
</div>
<div id="pt_main">
</div>
</body>
</html>
Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini, saya harap anda akan menyukainya.
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
Dreamweaver CS6
Alat pembangunan web visual
