记录一次前端页面样式

前言

写一个前端样式

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

一、目标展示

在这里插入图片描述

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

二、写代码

1.思路

思路如下：

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

2.代码展示

h5代码如下（示例）：

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

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=”里面写追加内容”;