实现简易版德州扑克

1.先上达到网页效果图（简易版德州扑克）

网页分为发牌区和牌池，上面为发牌区，下面是牌池区

2. 代码实现

2.1 HTML和JS代码

`

    <link rel="stylesheet" href="styles.css">

</head>

<body style="background-color:cornflowerblue">

    <div class="pool">

    </div>

    <div style="margin-top: 45px;" class="dealer card"></div>

    <script>

        function sendCard(){

            var randomNum = _.random(1,13)

            $('.pool').append(`<div class="card f${ randomNum }"></div>`)

        }

        $('.dealer').click(sendCard)

    </script>

</body>

`

2.2 CSS代码
    1：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    2：<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha256-G7A4JrJjJlFqP0yamznwPjAApIKPkadeHfyIwiaa9e0=" crossorigin="anonymous"></script>

    3：<link rel="stylesheet" href="styles.css">

1是JQuery，2为Underscore，3为link本地自写CSS

下面是自写CSS（style.css）

`body {

background-color: cornflowerblue;

}

.card {

height: 175px;

width: 125px;

background-image: url('./cards/back.png');

background-size: 100% 100%;

margin: 3px;

}

.pool {

display: flex;

border-style: dashed;

border-color: aliceblue;

border-width: 2px;

width: 655px;

height: 181px;

}

.f1 {

background-image: url('./cards/f1.png');

}

.f2 {

background-image: url("./cards/f2.png");

}

.f3 {

background-image: url("./cards/f3.png");

}

.f4 {

background-image: url("./cards/f4.png");

}

.f5 {

background-image: url("./cards/f5.png");

}

.f6 {

background-image: url("./cards/f6.png");

}

.f7 {

background-image: url("./cards/f7.png");

}

.f8 {

background-image: url("./cards/f8.png");

}

.f9 {

background-image: url("./cards/f9.png");

}

.f10 {

background-image: url("./cards/f10.png");

}

.f11 {

background-image: url("./cards/f11.png");

}

.f12 {

background-image: url("./cards/f12.png");

}

.f13 {

background-image: url("./cards/f13.png");

}

`

实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS的更多相关文章

  1. 用CSS实现蒙德里安名画|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

    实现项目:用CSS实现蒙德里安名画 1.首先,献上代码和效果图 1.1代码: <head> <style> .centerframe{ display: flex; heigh ...

  2. Android学习之路——简易版微信为例（二）

    1 概述 从这篇博文开始,正式进入简易版微信的开发.深入学习前,想谈谈个人对Android程序开发一些理解,不一定正确,只是自己的一点想法.Android程序开发不像我们在大学时候写C控制台程序那样, ...

  3. .NET CORE学习笔记系列(2)——依赖注入[4]: 创建一个简易版的DI框架[上篇]

    原文https://www.cnblogs.com/artech/p/net-core-di-04.html 本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章从 ...

  4. Android学习之路——简易版微信为例（三）

    最近好久没有更新博文,一则是因为公司最近比较忙,另外自己在Android学习过程和简易版微信的开发过程中碰到了一些绊脚石,所以最近一直在学习充电中.下面来列举一下自己所走过的弯路: (1)本来打算前端 ...

  5. Android学习之路——简易版微信为例（一）

    这是“Android学习之路”系列文章的开篇,可能会让大家有些失望——这篇文章中我们不介绍简易版微信的实现(不过不是标题党哦,我会在后续博文中一步步实现这个应用程序的).这里主要是和广大园友们聊聊一个 ...

  6. 前端学习 node 快速入门 系列 —— 简易版 Apache

    其他章节请看: 前端学习 node 快速入门 系列 简易版 Apache 我们用 node 来实现一个简易版的 Apache:提供静态资源访问的能力. 实现 直接上代码. - demo - stati ...

  7. 德州扑克AI WEB版

    继续之前的德州扑克话题,上次的DOS界面确实没法看,我女朋友说这是什么鬼.哈哈,估计只有自己能玩了 这两天重构了一下界面,基于web服务器和浏览器来交互. 服务器和客户端之间用websocket通信, ...

  8. Dubbo入门到精通学习笔记（九）：简易版支付系统介绍、部署（单节点）

    文章目录 部署(单节点) 一.前期准备 二.对部署环境进行规划 创建数据库 调整公共配置文件 应用部署前期准备 部署服务 部署 Web 应用 部署定时任务 一. 工程结构 第三方支付系统架构 pay- ...

  9. 贪吃蛇（简易版）Leslie5205912著

    # include <stdio.h># include <string.h># include <windows.h># include <stdlib.h ...

随机推荐

  1. LLVM程序分析日记之插桩BranchInst

    1. splitblockandinsertifthenelse() 一个代码例子:StackOverflow 2. SplitBlockAndInsertIfThen() 或者仅仅想插桩if the ...

  2. ubuntu20.04 系统初始化与美化

    ubuntu20.04 系统初始化与美化 参考博客:https://mp.weixin.qq.com/s/JowjHrs9GMVlolaoaSGiEg 参考博客:https://www.linuxmi ...

  3. Java8中执行js脚本

    代码中除了callJSFunctionFromFile函数,其他均转载于文章JDK1.8中如何用ScriptEngine动态执行JS import jdk.nashorn.api.scripting. ...

  4. Flink 自定义触发器

    import org.apache.flink.api.common.state.ReducingState; import org.apache.flink.api.common.state.Red ...

  5. 不一样的资产安全 3D 可视化平台

    前言   数字经济时代,应用好数据是企业数字化转型的关键,基于前沿科学技术进行数据的有效管控,更是对数字增值服务的新趋势.近年来,整个安全行业对资产管理的重视程度正在提高.据IDC发布的相关数据显示, ...

  6. Java 面试知识点【背诵版 240题 约7w字】

    -- 转载自牛客网 是瑶瑶公主吖 Java 基础 40 语言特性 12 Q1:Java 语言的优点? ① 平台无关性,摆脱硬件束缚,"一次编写,到处运行". ② 相对安全的内存管理 ...

  7. 【Python 1-8】Python手把手教程之——管理列表List

    遍历列表 在日常开发中,我们经常需要遍历列表的所有元素,对每个元素执行相同的操作.例如,在管理商场的蔬菜时候,需要给所有的蔬菜商品都打7折,并重新生成价格.当我们需要对列表中的每个元素都执行相同的操作 ...

  8. JavaWeb基础总结：Filter专题

    Java Servlet Filter Filter 被称为过滤器,其主要作用是对 Servlet 容器调用 Servlet 的过程进行拦截,从而在 Servlet 进行响应处理的前后实现一些特殊功能 ...

  9. 学习 Gin 问题总结 2020.12.29

    学习 Gin 问题总结 2020.12.29 数据绑定与解析 BindXXX,ShouldBindXXX和ShouldBindWith区别 BindXXX 会自动返回信息,输入无效时,在header写 ...

  10. JavaDailyReports10_06

    今日收获: 一.所有引用类型变量的初始化一定要使用new 关键字定义声明,空指针异常的错误原因可能是变量没有初始化导致的. 每一个类体的数据成员一定要在实例化的同时赋值,用一个实例化的类实现问题中最小 ...