Html学习随笔(打造第一个统计红包优惠券页面)

最新推荐文章于 2023-11-25 17:16:06 发布
最新推荐文章于 2023-11-25 17:16:06 发布
阅读量746 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35874340/article/details/87084628
版权 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="../../../lib/html5shiv.js"></script>
    <script type="text/javascript" src="../../../lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../../../static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="../../../lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../../static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="../../../static/h-ui.admin/css/style.css"/>
</head>
<body>
/**解释:breadcrumb是面包屑,是源码的东西,Hui-iconfont是前端框架字体图标库,&#xe67f设置了就自动出现个图标,<nav>是标签定义导航链接的部分。<i>是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，仅仅表示样式上是粗体或斜体，而没有强调的语义，这两个标签在HTML4.01中不推荐使用，建议用CSS样式.
**/
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计中心 <span
        class="c-gray en">&gt;</span> 红包优惠券 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                               href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">

    <div class="row cl">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="margin-bottom:15px;">
            <div class="renxuny1">
                <div class="renxuny01"><img src="../../../static/h-ui.admin/tubiao/user1.png" width="63" height="68"/>
                </div>
                <div class="renxuny02">
                    <p class="renxuny02-1">已使用红包</p>
                    <p class="renxuny02-2"><font style="font-size:38px;" id="newUsersCnt">0</font> 个</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="margin-bottom:15px;">
            <div class="renxuny2">
                <div class="renxuny01"><img src="../../../static/h-ui.admin/tubiao/user2.png" width="66" height="68"/>
                </div>
                <div class="renxuny02">
                    <p class="renxuny02-1">未使用红包</p>
                    <p class="renxuny02-2"><font style="font-size:38px;" id="allUserCnt">0</font> 个</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="margin-bottom:15px;">
            <div class="renxuny3">
                <div class="renxuny01"><img src="../../../static/h-ui.admin/tubiao/user3.png" width="70" height="66"/>
                </div>
                <div class="renxuny02">
                    <p class="renxuny02-1">已使用优惠券</p>
                    <p class="renxuny02-2"><font style="font-size:38px;" id="onlineCnt">0</font> 个</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="margin-bottom:15px;">
            <div class="renxuny4">
                <div class="renxuny01"><img src="../../../static/h-ui.admin/tubiao/user4.png" width="62" height="62"/>
                </div>
                <div class="renxuny02">
                    <p class="renxuny02-1">未使用优惠券</p>
                    <p class="renxuny02-2"><font style="font-size:38px;" id="browseVolumeCnt">0</font> 个</p>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-9" style="margin-top: 1.75rem;width:50%;">
            <div class="ren-wudi" style="height: 500px;">
                <div class="xinwen_xx01"
                     style="height:67px; border-bottom:1px solid #e1e1e1; padding:0 29px; overflow:hidden;background-color: white;display: flex;align-items: Center;">
                    <div class="xinwen_xx01-1">
                        <div style="font-size: 16px" class="ren-tiany01"><em class="ren-tiany01-1"></em>红包使用占比</div>
                    </div>
                    <div class="xinwen_xx01-2"></div>
                </div>
                <div>
                    <!-- 图表容器 DOM -->
                    <div id="container1" style="width: 100%;height:430px; font-size: 14px;"></div>
                </div>
            </div>
        </div>

        <div class="col-sm-3" style="margin-top: 1.75rem;width:50%;">
            <div class="ren-wudi" style="height: 500px;">
                <div class="xinwen_xx01"
                     style="height:67px; border-bottom:1px solid #e1e1e1; padding:0 29px; overflow:hidden;background-color: white;display: flex;align-items: Center;">
                    <div class="xinwen_xx01-1">
                        <div style="font-size: 16px" class="ren-tiany01"><em class="ren-tiany01-1"></em>优惠券使用占比</div>
                    </div>
                    <div class="xinwen_xx01-2"></div>
                </div>
                <div>
                    <!-- 图表容器 DOM -->
                    <div id="container2" style="width: 100%;height:430px; font-size: 14px;"></div>
                </div>
            </div>
        </div>
    </div>

</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../../../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../layui/layui.js"></script>
<script type="text/javascript" src="../../../static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="../../../static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../../../lib/datatables/1.10.0/jquery.dataTables.min.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../../lib/jquery.contextmenu/jquery.contextmenu.r2.js"></script>
<script type="text/javascript" src="../../../lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="../../../lib/jq.js"></script>
<script type="text/javascript" src="../../../lib/dict.js"></script>
<script type="text/javascript" src="../../../lib/permission.js"></script>
<script type="text/javascript" src="../../../lib/statisticalData.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../../lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="../../../lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">

    $(function () {
        // 1顶部加载top统计数据
        getTopData();
        // 2左加载认证用户占比
        getRedEnvelopes();
        // 3右加载托盘使用情况
        getCouponData();
    });

    function getTopData() {
        // 请求接口数据
        $.ajax({
            type: 'get',
            async: false,
            url: '/api/admin/analysis/dashBoard',
            success: function (result) {

                $("#newUsersCnt").html(result.newUsersCnt)
                $("#allUserCnt").html(result.allUserCnt)
                $("#onlineCnt").html(result.onlineCnt)
                $("#browseVolumeCnt").html(result.browseVolumeCnt)

            }
        });
    }

    /**红包请求**/
    function getRedEnvelopes() {
        var allArr = [];

        // 请求接口数据
        $.ajax({
            type: 'get',
            async: false,
            url: '/api/admin/analysis/authPercent',
            success: function (d) {
                // 往数组中添加元素
                $.each(d.result, function (i, v) {
                    var detailArr = [];
                    detailArr.push(v.AUTH_NAME);
                    detailArr.push(v.QUANTITY);
                    allArr.push(detailArr);
                });
                redEnvelopesSetting(allArr);
            }
        });
    }
    /**红包加载圆形控件**/
    function redEnvelopesSetting(allArr) {
        var chart = Highcharts.chart('container1', {
            chart: {
                spacing: [40, 0, 40, 0]
            },
            title: {
                floating: true,
                text: '红包使用占比'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    colors: [ //圆环颜色，如果数据多于颜色的个数，则颜色会重复出现
                        "#CCCCCC", "#D91D37", "#ED8C95"
                    ],
                    point: {
                        events: {
                            mouseOver: function (e) {  // 鼠标滑过时动态更新标题
                                chart.setTitle({
                                    text: e.target.name + '\t' + e.target.y + ' 个'
                                });
                            }
                        }
                    },
                }
            },
            series: [{
                type: 'pie',
                innerSize: '60%',
                name: '红包占比',
                data: allArr
            }]
        }, function (c) { // 图表初始化完毕后的会掉函数
            // 环形图圆心
            var centerY = c.series[0].center[1],
                titleHeight = parseInt(c.title.styles.fontSize);
            // 动态设置标题位置
            c.setTitle({
                y: centerY + titleHeight / 2
            });
        });
    }
    /**优惠券请求**/
    function getCouponData() {
        var allArr = [];

        // 请求接口数据
        $.ajax({
            type: 'get',
            async: false,
            url: '/api/admin/analysis/authPercent',
            success: function (d) {
                // 往数组中添加元素
                $.each(d.result, function (i, v) {
                    var detailArr = [];
                    detailArr.push(v.AUTH_NAME);
                    detailArr.push(v.QUANTITY);
                    allArr.push(detailArr);
                });
                couponSetting(allArr);
            }
        });
    }
    /**优惠劵加载圆形控件**/
    function couponSetting(allArr) {
        var chart = Highcharts.chart('container2', {
            chart: {
                spacing: [40, 0, 40, 0]
            },
            title: {
                floating: true,
                text: '优惠券使用占比'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    colors: [ //圆环颜色，如果数据多于颜色的个数，则颜色会重复出现
                        "#6DCEE8", "#FFBD4F", "#ED8C95"
                    ],
                    point: {
                        events: {
                            mouseOver: function (e) {  // 鼠标滑过时动态更新标题
                                chart.setTitle({
                                    text: e.target.name + '\t' + e.target.y + ' 个'
                                });
                            }
                        }
                    },
                }
            },
            series: [{
                type: 'pie',
                innerSize: '60%',
                name: '优惠券占比',
                data: allArr
            }]
        }, function (c) { // 图表初始化完毕后的会掉函数
            // 环形图圆心
            var centerY = c.series[0].center[1],
                titleHeight = parseInt(c.title.styles.fontSize);
            // 动态设置标题位置
            c.setTitle({
                y: centerY + titleHeight / 2
            });
        });
    }


</script>
</body>
</html>

增加效果图：

 

土狗的想法
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
浅析微信支付：公众平台卡券功能开通、HTML5线上发券（JS-SDK接口）、查看卡券详情
YClimb的专栏
12-04 3190
本文是【浅析微信支付】系列文章的第十六篇，主要讲解如何使用微信公众平台的卡券功能、如何使用HTML5在网页展示用户领券以及微信卡券和商户平台代金券的关系。 前几篇文章主要介绍了如何在【微信商户平台】使用代金券和满减优惠折扣等产品功能，有不少小伙伴说到，【微信公众平台】也有一个卡券功能，那么他们有什么差别呢？这个卡券功能该如何使用？本文会给大家一个解释。 浅析微信支付：商户平台代金券或立减优惠...
HTML个人网页设计，共五个页面
11-27
它由五个主要的HTML文件组成，分别是首页、关于我、心情随笔、留言板和个人作品页面，这些页面构成了一个基本的个人网站结构。 首页.html通常是网站的入口点，它会引导访问者了解网站的主要内容。在HTML中，首页...
HTML_优惠券静态界面.zip
11-18
HTML优惠券静态界面,包优惠券括过期，失效状态
CSS不规则卡片-纯CSS制作优惠券样式-CSS实现锯齿样式
JackieDYH的博客
01-04 1312
布局 布局 其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。 看上图，而这里，我们就只是最简单的布局方式，从上而下： 1、优惠券金额和过期时间 2、优惠券描述 3、按钮（其实按钮也可以放到“2”里面去） 这样分析，我们就有了 html 架构了 <div class="coupon"> <!-- 1、优惠券金额和过期时间 --> <div class="price"> 100元 <span..
html css制作简单优惠卷
m0_68605510的博客
12-08 730
使用html css实现简单的优惠卷页面
手机端我的优惠券页面html代码
ICode联盟
11-03 648
通用的商城app我的优惠券手机页面html模板。未使用、已使用、已过期，输入兑换码等功能。
了解html页面的渲染过程以备学习前端的性能优化(续)
12-14
昨天晚上写了一篇关于浏览器的渲染过程的随笔，但只是通过一小段代码解释了一下，并没有通过浏览器测试，说服力不够，而且还有很多不完善的地方，今天在浏览器中测试了一下，并把测试的结果分享给大家，测试过程可能...
第一个Android应用扫描宝欲挑战传统扫描枪
03-04
这个小小的Android应用还是去年年底开发的，过完年后一直都很忙，也比较懒，今天在整理资料的时候，觉得这个小小的应用算是学习Android开发的一个毕业作业吧，也跟大家分享一下。本来一直在做.net平台的开发，但是...
javascript学习随笔(编写浏览器脚本 Navigator Scripting )
10-31
javascript学习随笔(编写浏览器脚本 Navigator Scripting ) javascript是一种脚本语言，经常用于浏览器脚本编写，可以嵌入HTML中，以两种方式：作为语句和函数使用时，使用SCRIPT标记；作为事件处理程序使用时，...
优惠券领取网站html静态模板
12-04
优惠券领取网站html静态模板
手机端我的优惠券页面代码
06-10
这是一个适用于网页端和移动端页面的优惠券页面，可以在理面稍微做修改，改成使用自己的我的优惠券页面，可以快速简单使用，希望可以帮助到有需要的人
H5移动端优惠卷系统后台PHP
09-14
移动端优惠卷系统，适合做微信二次开发，在公众号移动端均可使用，带后台版本
纯CSS优惠券效果
03-18
纯CSS样式编写的优惠券源码
html+css+js 仿微信红包
10-19
html+css+js 仿微信红包
HTML5+CSS：03优惠券
Yummy的博客
11-05 1969
优惠券样式： 代码马上送上： <!DOCTYPE html> <html> <head> <meta charset="utf8"> <style> body { display: flex; flex-wrap: wrap; } .c...
HTML和CSS做优惠券效果
max_1414的博客
09-23 4137
最近看到好几个花里胡哨的作品，不禁感叹，还是能人多。。。。 这是之前做小程序时候，QQ群里分享的一个 代码就贴在下边了，顺便做一下记录 HTML： <body> <div class="demo"> <!-- 效果1 begin --> <div class="stamp stamp01"> <div class=...
一文教你优惠券样式代码编写，让你的网站脱颖而出！
CRMEB小程序商城的博客
11-25 1174
【代码】一文教你优惠券样式代码编写，让你的网站脱颖而出！
网页优惠券CSS3借鉴
W的博客
10-29 1089
body： &lt;!--可用--&gt; &lt;div class="coupon"&gt; &lt;div class="coupon-left"&gt; &lt;div class="coupon-inner"&gt; &lt;div class="coupon-money
创建一个WooCommerce兑换优惠券页面
culi4814的博客
08-27 616
In this article, we will explore a unique way of allowing your customers to easily redeem a product or group of products they may have paid for already perhaps at a conference or other similar event. ...
android 心情随笔
最新发布
04-26
Android心情随笔是一款基于Android平台的应用程序，它允许用户记录和分享自己的心情、感受和思考。用户可以通过文字、图片、音频等方式表达自己的情绪和心情，并将其保存在应用中。此外，用户还可以选择将心情随笔...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

土狗的想法

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值