前言

写一个前段样式

提示：以下是本篇文章正文内容，下面案例可供参考

一、目标展示

示例：将后台传来的整数分割成计数板显示

二、写代码

1.思路

思路如下：

想法很简单：
图形分为两部分，数字部分 跟 0部分，两部分拆分做
每一位数字存在一个正方形（div）中，（肯定要把数字每位都拿出来以循环的方式放进div）
将后台传来的一个整数先判断是几位数，不足六位数要补0
同时判断的时候把每位数放入一个列表中然后输出数据的时候用。

2.代码展示

h5代码如下（示例）：

<h2 class="title">全国供应商数量</h2><div class="main-center-number" id="chinanum"><!-- color由js判断内容是否不为0动态添加class --></div>

css如下（示例）：

自己写

js如下（示例）：

$(function () {$.ajax({url: "这里是请求地址",   //请求的地址dataType: 'json',   //请求你成功后返回数据的格式type: 'POST',  //请求的类型post或get//data:{"":""}, //需要加查询条件的时候用success: function (cnum) {   //()里面对应的就是后端传来的东西//用来接所有位数的数组var array = new Array();//先乘10排除只有一位数的情况// 判断几位数var daoxu;for (var i=0;cnum!=0;i++){array[i]=cnum%10;cnum = Math.floor(cnum/10);daoxu = i;}if (i<6){for (var j=1;j<=6-i;j++){$("#chinanum").append(" <div class=\"number-item\">\n" +"                        <span>0</span>\n" +"                    </div>");}for (var k=1;k<=i;k++){$("#chinanum").append(" <div class=\"number-item\">\n" +"                        <span style='color: #fcc117'>"+array[i-k]+"</span>\n" +"                    </div>");}}else {for (var k=1;k<=i;k++){$("#chinanum").append(" <div class=\"number-item\">\n" +"                        <span style='color: #fcc117'>"+array[i-k]+"</span>\n" +"                    </div>");}}},error: function (cnum) {alert(msg); //错误信息}})
})

总结

以id选择器展示
追加内容： $("#div").append("里面写追加内容");
修改内容：document.getElementById("div").innerHTML="里面写追加内容";

分割（计数板）展示数字样式相关推荐

html页面展示Json样式
一般有些做后台数据查询,要把后台返回json数据展示到页面上,如果需要展示样式更清晰.直观.一目了然,就要用到html+css+js实现这个小功能一.css代码 pre {outline: 1px ...
php科学计数法转string,php如何将科学计数法转数字
php将科学计数法转数字的实现方法:首先通过if语句判断指定的数值是否为科学计数法:然后提取科学计数法中有效的数据:接着正式处理该数据:最后调用"convert_scientific_num ...
Wps日期时间格式转文本、科学计数法转数字
日期时间单元格,显示的是文本,但实际数值是数字形式. 有时我们引用其单元格,需要的是文本形式,不是数字. 可以用下面方式转换 =TEXT(A2,"YYY-MM-DD hh:mm:ss&quo ...
vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）
vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-n ...
CSS 仿 iOS 系统通知数字样式
iOS 的图标上显示通知的数字: 下面代码就是用 CSS 模仿数字的样式: /*********************************************************/ /* ...
Excel怎么把数字样式日期转为标准日期格式
今天跟大家分享一下Excel怎么把数字样式日期转为标准日期格式 1.打开Excel文件 2.选择要处理的单元格区域 3.点击下图选项(Excel工具箱,百度即可了解详细下载安装信息,本文这里就不做详细 ...
CSS立体文字和电子数字样式数字大屏数字
立体数字: CSS:text-shadow: 6px 3px 0px rgb(0 225 21 / 36%) 电子数字: CSS: font-family: 'electronicFont'; CSS ...
sql查询将科学计数法转为数字型
忘了是哪来的数据,指标值value有科学计数法的情况,不方便做统计计算,所以就有了需要将科学计数法转为数字型的场景,sql查询如下: select convert(sum(volumes),decim ...
Python使用科学计数法显示数字的解决方案
大家好,我是爱编程的喵喵.双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中.从事机器学习以及相关的前后端开发工作.曾在阿里云.科大讯飞.CCF等比赛获得多次Top名次.现 ...

分割（计数板）展示数字样式

文章目录

前言

一、目标展示

二、写代码

1.思路

2.代码展示

总结

分割（计数板）展示数字样式相关推荐

最新文章

热门文章