如何制作一个装满号码的盒子?

时间:2017-04-12 02:22:26

标签: html css

假设我有这个数字445758,我希望这些数字中的每一个都在这个框中enter image description here

如何实现目标?

1 个答案:

答案 0 :(得分:1)

//conver the number to a string
var num_string=String(445758);
//loop through each character in the string and insert it into a 
//div which will be inserted into the document.
for(var x=0;x<num_string.length;++x){
var box=document.createElement("div");
box.className="box";
box.innerHTML=num_string[x]
document.getElementsByClassName("code")[0].appendChild(box);

}
.box{
display:inline-block;
padding:10px;
background:linear-gradient(yellow,white);
margin-right:5px;
margin-left:5px;
}
<div class="code"></div>