<!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. js-js的运算

    ** js里面不区分整数和小数 var j = 123; alert(j/1000*1000); //在Java里面结果是0 //在js里面不区分整数和小数 123/1000 = 0.123 *100 ...

  2. BZOJ3193: [JLOI2013]地形生成

    传送门 Sol 第一问可以考虑按照山的高度从大到小放 但是这样如果遇到高度相同的就不好考虑,那么同时要求数量限制从小到大 这样每次放的时候后面的一定不会影响前面,并且高度相同的时候前面能放的位置后面的 ...

  3. 1475 m进制转十进制

    1475 m进制转十进制  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 将m进制数n转化成一个十进制数 ...

  4. 【js常用DOM方法】

    介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* ...

  5. 浏览器根对象window之Location

    1. Location Location 对象包含有关当前 URL 的信息.Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. 1.1 Loc ...

  6. EventTarge Node Docuement Element HTMLElement 关系

    综述: 可以将其看做是依次继承的关系: Node Node A Node is an interface from which a number of DOM types inherit, and a ...

  7. 为什么说对象字面量赋值比new Object()高效？

    http://www.cnblogs.com/mushishi/p/5811743.html

  8. Effective C++ Notes

    Item 07 : 为多态基类声明virtual析构函数 #include <iostream> using namespace std; class Base { public: Bas ...

  9. Castle.Windsor IOC/AOP的使用

    Castle最早在2003年诞生于Apache Avalon项目,目的是为了创建一个IOC(控制反转)框架.发展到现在已经有4个组件了,分别是ActiveRecord(ORM组件).Windsor(I ...

  10. 【Leetcode】【Hard】Copy List with Random Pointer

    A linked list is given such that each node contains an additional random pointer which could point t ...