<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         .all {

             width: 100%;

             height: 1000px;

         }

         .all>div:first-child {

             width: 50%;

             height: 200px;

             display: flex;

             margin: 0 auto;

             justify-content: space-between;

             align-items: center;

         }

         .all>div:nth-child(2) {

             display: flex;

             justify-content: space-around;

             align-items: center;

             width: 100%;

             height: 1000px;

         }

         .all>div:nth-child(3) {

             width: 100%;

             height: 400px;

             /* display: flex;

             align-items: center;

             justify-content: center; */

         }

         #star {

             width: 100px;

             height: 100px;

             background: red;

             border-radius: 50%;

             display: flex;

             align-items: center;

             justify-content: center;

         }

         #play1 {

             width: 250px;

             display: flex;

             justify-content: space-between;

             align-items: center;

         }

         #play1>:last-child {

             width: 110px;

         }

         #play2 {

             width: 250px;

             display: flex;

             justify-content: space-between;

             align-items: center;

         }

         #play2>:first-child {

             width: 110px;

         }

         #play3 {

             height: 310px;

         }

         #play3>:last-child {

             height: 110px;

             width: 100%;

             display: flex;

             justify-content: center;

         }

         #wanjia3 {

             width: 100%;

             display: flex;

             justify-content: center;

         }

         #play1>div:first-child {

             width: 100px;

             height: 100px;

             border: 1px solid red;

             border-radius: 50%;

             display: flex;

             align-items: center;

             justify-content: center;

         }

         #play2>div:last-child {

             width: 100px;

             height: 100px;

             border: 1px solid red;

             border-radius: 50%;

             display: flex;

             align-items: center;

             justify-content: center;

         }

         #play3>div:last-child>p {

             width: 100px;

             height: 100px;

             border: 1px solid red;

             border-radius: 50%;

             display: flex;

             align-items: center;

             justify-content: center;

         }

     </style>

 </head>

 <body>

     <div class="all">

         <div id="play">

         </div>

         <div>

             <div id="play1">

                 <div>玩家一</div>

                 <div id="wanjia1">

                 </div>

             </div>

             <div id="star">

                 <input type="button" value="开始">

             </div>

             <div id="play2">

                 <div id="wanjia2">

                 </div>

                 <div>玩家二</div>

             </div>

         </div>

         <div id="play3">

             <div id="wanjia3">

             </div>

             <div>

                 <p>玩家三</p>

             </div>

         </div>

     </div>

     <script>

         let play = document.getElementById('play');

         let play1 = document.getElementById('wanjia1');

         let play2 = document.getElementById('wanjia2');

         let play3 = document.getElementById('wanjia3');

         let star = document.getElementById('star');

         let arr = [];//创建数组

         for (let i = 3; i < 18; i++) {

             if (i < 16) {

                 for (let j = 1; j < 5; j++) {

                     arr.push(`./images/${i}_${j}.jpg`);//吧图片放入数组中

                 }

             } else {

                 arr.push(`./images/${i}_1.jpg`)

             }

         }

         star.onclick = function () {//开始按钮被点击时

             for (let i = 0; i < arr.length; i++) {//遍历出数组

                 let num = fn(0, 53);//随机数

                 let item = arr[i];//item 空数组，将arr[i]放入

                 arr[i] = arr[num];

                 arr[num] = item;

             }

             let image1 = arr.slice(0, 17);//截取数组

             let image2 = arr.slice(17, 34);

             let image3 = arr.slice(34, 51);

             let image4 = arr.slice(51, 54);

             image1.sort(paixu);

             image2.sort(paixu);

             image3.sort(paixu);

             image4.sort(paixu);

             play1.innerHTML = '';//清空

             for (let a of image1) {

                 play1.innerHTML += `<img src="${a}" alt="">`//添加数组

                 play1.lastElementChild.style.marginTop = '-110px'

             }

             play2.innerHTML = '';

             for (let a1 of image2) {

                 play2.innerHTML += `<img src="${a1}" alt="">`

                 play2.lastElementChild.style.marginTop = '-110px'

             }

             play3.innerHTML = '';

             for (let a2 of image3) {

                 play3.innerHTML += `<img src="${a2}" alt="">`

                 play3.lastElementChild.style.marginLeft = '-70px'

             }

             play.innerHTML = '';

             for (let a3 of image4) {

                 play.innerHTML += `<img src="${a3}" alt="">`

             }

         }

         function paixu(al, bl) {

             let ra = al.slice(9, al.lastIndexOf('.'));

             let rb = bl.slice(9, bl.lastIndexOf('.'));

             let arr1 = ra.split('_');

             let arr2 = rb.split('_');

             // console.log(arr1, arr2)

             if (parseInt(arr1[0]) < parseInt(arr2[0])) {

                 return 1;

             } else if (parseInt(arr1[0]) > parseInt(arr2[0])) {

                 return -1;

             }else{

                 if(arr1[1]<arr2[1]){

                     return 1;

                 }else if(arr1[1]>arr2[1]){

                     return -1;

                 }else{

                     return 0;

                 }

             }

         }

             //随机数函数

         function fn(min, max) {

             if (!max) {//当max没有值时

                 max = min;

                 min = 0;

             }

             return parseInt(Math.random() * (max - min + 1) + min);

         }

     </script>

 </body>

 </html>

用JavaScript编写简单斗地主效果Es6的更多相关文章

  1. HTML 和 JavaScript 编写简单的 404 界面

    编写简单的 404 界面,也可以用来做 500 报错界面,还会飘东西,特别好,蛮漂亮的! <!DOCTYPE html> <html> <head> <met ...

  2. JavaScript编写简单的抽奖程序

    1.需求说明 某公司年终抽奖,需要有如下功能 1)可以根据实际情况设置到场人数的最大值 2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上 3)在界面里显示全部奖项获奖人编号 4 ...

  3. 学习笔记之javascript编写简单计算器

      感觉自己的的实力真的是有待提高,在编写计算器的过程中,出现了各种各样的问题,暴露了自己的基础不扎实,逻辑思维能力不够,学得知识不能运用到自己的demo中区.先介绍一些这个这个计算器的整体思路.大致 ...

  4. JS实现简单斗地主效果

    let play = document.querySelectorAll(".play"); let dizhupai = document.getElementById(&quo ...

  5. 用javascript编写地区表单ES6

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JavaScript编写简单的增加与减少元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 用javascript编写简单银行取钱存钱流程（函数）

    const readline = require('readline-sync')//引用readline-sync let arr = [[], []]; //登陆 let add = functi ...

  8. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  9. 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程

    原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...

随机推荐

  1. POJ P3667 Hotel——solution

    Description The cows are journeying north to Thunder Bay in Canada to gain cultural enrichment and e ...

  2. drupal 通过hook_menu实现添加菜单

    $items['mypayment/onlinepay']=array( 'title' => '在线充值', 'description' => '在线充值', 'page callbac ...

  3. WiFiDog 与 AuthServer

    背景 在一些公共场所(比如公交车.地跌.机场等)连接当地的 WiFi 时会弹出一个验证表单,输入验证信息(比如短信验证码)后就能够通过该 WiFi 联网. 本文将介绍通过 OpenWrt WiFiDo ...

  4. Linux 新手入门常用命令

    1,增加用户:useradd mylinux passwd mylinux 添加你的用户密码 2,切换用户: su otheruser   (注意这种切换方式只是临时的,本质工作目录还在原来的用户目录 ...

  5. SSH反向代理转发至内网msf

    前言 买了个便宜的 vps , 在上面装 msf 也装不上,于是想着把端口映射到内网来. 正文 拓扑如下: 首先在内网主机 B ssh -fCNR 7281:localhost:5000 root@C ...

  6. Asp.Net MVC 开发技巧（二）

    Linq查询 Linq的使用大体分为两种:语句表达式   和  方法 首先,我们要在控制器中定义好context private ApplicationDbContext db = new Appli ...

  7. 在Activities之间导航

    <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="ht ...

  8. 团队作业—预则立&&他山之石（人月神教）

    1.团队任务 GitHub issues 1.2 团队计划 2.访谈任务 2.1采访对象 采访团队:龙威零式 采访时间:2017.10.23 采访形式:微信群 2.2采访内容 问:你们选题的时候有哪些 ...

  9. Linux服务器磁盘空间占满问题

    下面我们一起来看一篇关于Linux服务器磁盘占满问题解决(/dev/sda3 满了),希望碰到此类问题的人能带来帮助.   今天下班某电商技术部leader发现个问题,说他们服务器硬盘满了.把日志文件 ...

  10. windows server 2008/2012安装PostgreSQL过程及问题总结

    今天第一次接触在Windows Server2008/2012 下安装PostgreSQL,遇到的问题总结如下: 1.首先,在安装的时候,我更改安装目录改为自定义的E盘,安装时报错:libintl.d ...