<!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. css中小知识点总结

    rgba:即rgb+a, a为图片透明度,a范围是0~1,越小就表示越透明 :hover 即鼠标悬停时改变样式,不仅仅能用在a元素上. <form>标签表示向浏览器提交表单,一般会包裹着输 ...

  2. Spring Data MongoDB 基础查询

    有两种方式查询 BasicQuery 和 Query 一.BasicQuery BasicQuery query = new BasicQuery("{ age : { $lt : 26 } ...

  3. Android N（API level 24.）废弃了Html.fromHtml(String)

    从API level 24开始,fromHtml(String)被废弃,使用fromHtml(String source, int flags) 代替 flags: FROM_HTML_MODE_CO ...

  4. JS的排序算法

    排序是最基本的算法(本文排序为升序Ascending),常见的有以下几种: 1.冒泡排序 Bubble Sort 2.选择排序 Selection Sort 3.插入排序 Insertion Sort ...

  5. Azure Linux 虚拟机常见导致无法远程的操作

    对Azure虚拟机的一些操作可能会导致无法远程连接,本文罗列了以下导致不能远程连接的场景: 场景1 - 在虚拟机配置IP地址或MAC地址 场景2 - 错误地修改服务的配置文件 场景3 - 误设置防火墙 ...

  6. 让UpdatePanel支持文件上传（2）：服务器端组件 .

    我们现在来关注服务器端的组件.目前的主要问题是,我们如何让页面(事实上是ScriptManager控件)认为它接收到的是一个异步的回送?ScriptManager控件会在HTTP请求的Header中查 ...

  7. 关于asp.net MVC3 ----@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction

    1.带有Render的方法返回值是void,在方法内部进行输出:不带的返回值类型为MvcHtmlString,所以只能这样使用:@Html.Partial 对应 @{Html.RenderPartia ...

  8. PHP-FPM详解

    目录 作用 安装 全局配置 配置进程池 参考Company开发环境 转发请求给PHP-FPM 思考 作用 PHP-FPM(PHP FastCGI Process Manager)意:PHP FastC ...

  9. 定义类、System.Object对象、构造函数与析构函数、抽象类与静态类

    一.类定义 class MyClass { //类成员 } 1.访问级别 默认访问级别为internal(内部类),也可以是public(公共类) internal(内部类):当前项目中的代码才能访问 ...

  10. 内网渗透之IPC，远程执行

    开启服务 net start Schedule net start wmiApSrv 关闭防火墙 net stop sharedaccess net use \\目标IP\ipc$ "&qu ...