<!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. 浅谈arguments与arguments的妙用

    1.每个函数都有一个arguments属性,表示函数的实参集合,这里的实参是重点,就是执行函数时实际传入的参数的集合. 2.arguments不是数组而是一个对象,但它和数组很相似,所以通常称为类数组 ...

  2. UOJ46. 【清华集训2014】玄学

    传送门 Sol 考虑对于操作时间建立线段树,二进制分组 那么现在主要的问题就是怎么合并信息 你发现一个性质,就是每个修改只会在整个区间内增加两个端点 那么我们二进制分组可以得到每个区间内最多只有区间长 ...

  3. JavaScript Standard Style

    这是 JavaScript standard 代码规范的全文. 掌握本规范的最好方法是安装并在自己的代码中使用它. https://github.com/standard/standard/blob/ ...

  4. Maven-pom-configuration

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  5. Python with VS Code

    1. 基本的代码结构为: 2.

  6. 实验吧Crypto题目Writeup

    这大概是一篇不怎么更新的没什么用的网上已经有了很多差不多的东西的博客. 变异凯撒 忘记了2333 传统知识+古典密码 先查百度百科,把年份变成数字,然后猜测+甲子的意思,一开始以为是加1,后来意识到是 ...

  7. NexusFile(文件管理器)

    NexusFile是一款来自于韩国的文件管理器,类似于TotalCommander,拥有两个并排的文件夹窗口. NexusFile软件的特性如下: 基本功能:复制/移动, 复制/剪切/粘贴, 删除/擦 ...

  8. 企业级Ngnix基于域名的配置_server

    普通的nginx配置 egrep -v "#|^$" /usr/local/nginx/conf/nginx.conf.default 更改nginx的配置文件-->注意空格 ...

  9. 深圳云栖大会人工智能专场：探索视频+AI，玩转智能视频应用

    摘要: 在人工智能时代,AI技术是如何在各行业和领域真正的发挥应用和商业价值,带来产业变革才是关键.在3月28日深圳云栖大会的人工智能专场中,阿里云视频服务技术专家邹娟将带领大家探索熟悉的视频场景中, ...

  10. 沉淀再出发：java中的HashMap、ConcurrentHashMap和Hashtable的认识

    沉淀再出发:java中的HashMap.ConcurrentHashMap和Hashtable的认识 一.前言 很多知识在学习或者使用了之后总是会忘记的,但是如果把这些只是背后的原理理解了,并且记忆下 ...