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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
JavaScript 继承使用分析
May 12 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
js时间控件只显示年月
Jan 08 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Python函数中的函数(闭包)用法实例
2016/03/15 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
Python3获取cookie常用三种方案
2020/10/05 Python
python 装饰器重要在哪
2021/02/14 Python
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
优秀德育工作者事迹材料
2014/05/07 职场文书
营销经理工作检讨书
2014/11/03 职场文书
党员检讨书范文
2014/12/27 职场文书
银行员工考核评语
2014/12/31 职场文书
体育教师研修感悟
2015/11/18 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Python办公自动化解决world文件批量转换
2021/09/15 Python