<!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. NOI 2016 区间 解题报告

    题目描述 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x,使得对于每一 ...

  2. 关于npm构建angular2项目问题

    我在win10系统下用npm构建好angular2项目之后,在命令行下运行 ng serve --open,报一下错误: Unknown browser query 'basedir=$(dirnam ...

  3. 国内外有名的java论坛

     国内: www.chinajavaworld.com-论坛人很多,高手也多,不过好像都在潜水      www.cn-java.com -也很不错,文章很好,但是就是商业性浓了点.      www ...

  4. OpenCV实现基于傅里叶变换的旋转文本校正

    代码 先给出代码,再详细解释一下过程: #include <opencv2/core/core.hpp> #include <opencv2/imgproc/imgproc.hpp& ...

  5. Windows下本机简易监控系统搭建（Telegraf+Influxdb+Grafana）

    一.文件准备 1.1 文件名称 telegraf-1.2.1_windows_amd64.zip influxdb-1.2.2_windows_amd64.zip grafana-4.2.0.wind ...

  6. 八、angularjs 中 filter在controller中的使用--避免多次遍历

    filter在html页面的使用司空见惯,比如: filter在controller中使用可以避免多次使用angular.foreach,来进行遍历.例如: 如果使用filter,则会让代码简洁而且明 ...

  7. sqldataAdapter/dataset/datatable的使用

    public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Loa ...

  8. d3js shape深入理解

    本文将视图了解d3js提供的帮助我们创建矢量图形的helper函数,比如下面的: http://d3indepth.com/shapes/ lines curves pie chart segment ...

  9. 了解 Azure VM 的系统重启

    有时 Azure 虚拟机 (VM) 可能重启,即使没有明显原因,也没有证据表明用户发起重启操作. 本文列出了可导致 VM 重启的操作和事件,并针对如何避免意外重启问题或减少该问题影响提供见解. 配置 ...

  10. TMG阵列部署选择

    如果用户环境中有多个网络出口,用EMS配置TMG是最佳选择.在这种情况下,可以使用EMS管理的阵列配置企业级访问规则.由于一个单一的策略适用于整个企业的所有阵列,因此管理成本将大大降低.用于EMS的服 ...