分割(计数板)展示数字样式
前言
写一个前端样式提示:以下是本篇文章正文内容,下面案例可供参考
一、目标展示
示例:将后台传来的整数分割成计数板显示
二、写代码
1.思路
思路如下:
1 | 想法很简单: |
2.代码展示
h5代码如下(示例):
1 | <h2 class="title">全国供应商数量</h2> |
css如下(示例):1
自己写
js如下(示例):1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42$(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); //错误信息
}
})
})
<hr style=” border:solid; width:100px; height:1px;” color=#000000 size=1”>
总结
以id选择器展示
追加内容: $(“#div”).append(“里面写追加内容”);
修改内容:document.getElementById(“div”).innerHTML=”里面写追加内容”;