javascript九宫格图片随机打乱位置的实现方法


Posted in Javascript onMarch 15, 2017

今天就做个九宫格的简易拼图,最让我头疼的就是点击开始打乱图片位置。一开始在百度查看相关博客,走了很多弯路。最后看了众多的例子,自己写了个方法。

<script>
//打乱图片方法
  function fun(){
   var x = [];
   var y ;
   for(var i=1;i<10;i++){
    var div = document.getElementById("d"+i+"");
    div.removeChild(document.getElementById("img"+i+""));
   }
   for(var i=1;i<10;i++){
   var img = document.createElement('img'); //动态创建img标签
    var div1 = document.getElementById("d"+i+"");
    var p = [1,2,3,4,5,6,7,8,9];
//用p[]数组保存图片的代号
    var j = Math.round(Math.random()*8);
//通过随机数j产生随机图片代号p[j]
    for ( var u=0 ; u < x.length ; u++ ) //遍历x[]数组防止后面出现与前面一样的图片代号
   
{ 
    
if ( x[u] == p[j] ) 
    
{ 
    
 y = x[u];
      break;
    
} 
   
}
    if(p[j]==y){
     i-=1;
     continue; 
    }else{
     img.setAttribute("src","images/tiger_0"+p[j]+".gif");
     img.id = "img"+i+"";
    }
    div1.appendChild(img);
    x.push(p[j]); //添加已经出现的图片号数进入x[]数组
   }
  dragdrop();//拖动图片方法
  }
</script>

点击开始可以达到随机打乱图片位置的效果,如下

javascript九宫格图片随机打乱位置的实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
JavaScript实现审核流程状态的动态显示进度条
Mar 15 #Javascript
js实现自定义进度条效果
Mar 15 #Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 #Javascript
jQuery模拟窗口抖动效果
Mar 15 #Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 #Javascript
基于React实现表单数据的添加和删除详解
Mar 14 #Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 #Javascript
You might like
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP四大安全策略
2014/03/12 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
php压缩文件夹最新版
2018/07/18 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
收银员岗位职责
2014/02/07 职场文书
安全演讲稿大全
2014/05/09 职场文书
英语专业求职信
2014/07/08 职场文书
组工干部对照检查材料
2014/08/25 职场文书
旷课检讨书范文
2015/01/27 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书