一、运行截图
截图1：
截图2：
二、代码
html代码：
<div class="time" >
<ng-container #container> </ng-container>
</div> <ng-template #child_elem>
<div class="digit minutes">
<div class="segment "></div>
<div class="segment "></div>
<div class="segment "></div>
<div class="segment "></div>
<div class="segment "></div>
<div class="segment "></div>
<div class="segment "></div>
</div>
</ng-template> <ng-template #point_elem>
<div class="separator minutes"></div>
</ng-template>
css代码：
.time {
height: 40px;
position: absolute;
top:;
left: 28%;
width: 100px;
margin-left: 0px;
text-align: center;
z-index:;
margin-top: -7px;
}
.time .digit {
width: 16px;
height: 44px;
position: relative;
display: inline-block;
margin-top: 2px;
}
.digit .segment {
background:#11c4fb;
border-radius:2px;
position:absolute;
opacity:0.1;
transition:opacity 0.2s;
-webkit-transition:opacity 0.2s;
-ms-transition:opacity 0.2s;
-moz-transition:opacity 0.2s;
-o-transition:opacity 0.2s;
}
.digit .segment.on, .separator {
opacity:;
background:#11c4fb;
box-shadow:0 0 30px rgba(0,255,0,0.1);
transition:opacity 0s;
-webkit-transition:opacity 0s;
-ms-transition:opacity 0s;
-moz-transition:opacity 0s;
-o-transition:opacity 0s;
}
.time .separator {
width: 4px;
height: 4px;
background: #11c4fb;
border-radius: 50%;
display: inline-block;
position: relative;
bottom: 10px;
}
.digit .segment:nth-child(1) {
top: 10px;
left: 4px;
right: 4px;
height: 2px;
background: #11c4fb;
}
.digit .segment:nth-child(2) {
top: 12px;
right: 1px;
width: 2px;
height: 75px;
height: calc(71% - 21px);
background: #11c4fb;
}
.digit .segment:nth-child(3) {
bottom: 10px;
right: 1px;
width: 2px;
height: 72px;
height: calc(71% - 21px);
background: #11c4fb;
}
.digit .segment:nth-child(4) {
bottom: 8px;
right: 4px;
height: 2px;
left: 4px;
background: #11c4fb;
}
.digit .segment:nth-child(5) {
bottom: 12px;
left: 2px;
width: 2px;
height: 75px;
height: calc(70% - 24px);
background: #11c4fb;
}
.digit .segment:nth-child(6) {
top: 14px;
left: 2px;
width: 2px;
height: 75px;
height: calc(70% - 24px);
background: #11c4fb;
}
.digit .segment:nth-child(7) {
bottom: 95px;
bottom: calc(71% - 11px);
right: 4px;
left: 4px;
height: 2px;
background: #11c4fb;
}
ts代码：
import { Component, OnInit, Input, ViewChild, ViewContainerRef, TemplateRef, ElementRef, QueryList, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-led-clockfont',
templateUrl: './led-clockfont.component.html',
styleUrls: ['./led-clockfont.component.css']
})
export class LedClockfontComponent implements OnInit {
@ViewChild("container", {read: ViewContainerRef}) container_elem: ViewContainerRef;
@ViewChild("child_elem") tpl_elem: TemplateRef<any>;
@ViewChild("point_elem") tpl_point_elem: TemplateRef<any>;
@Input() fontValue:number = 0;
//数值模型数组，0,1,2,3,4,5,6,7,8,9
private digitSegments = [
[1, 2, 3, 4, 5, 6],
[2, 3],
[1, 2, 7, 5, 4],
[1, 2, 7, 3, 4],
[6, 7, 2, 3],
[1, 6, 7, 3, 4],
[1, 6, 5, 4, 3, 7],
[1, 2, 3],
[1, 2, 3, 4, 5, 6, 7],
[1, 2, 7, 3, 6, 4]
]
constructor(private el:ElementRef) {
}
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges): void {
if(parseFloat(this.fontValue.toString())){
this.createDomContainer();
}else{
//Do-nothing
}
// this.createDomContainer();
}
createDomContainer(){
//根据当前数值长度处理DOM容器
if(0 !== this.fontValue.toString().length){
//清空容器内视图
this.container_elem.clear();
//处理容器内视图
let view = null;
let point_index = this.fontValue.toString().indexOf('.');
for(let i=0;i<this.fontValue.toString().length;i++){
if((-1 != point_index) && (i == point_index)){
view = this.tpl_point_elem.createEmbeddedView(null);
this.container_elem.insert(view);
}else{
view = this.tpl_elem.createEmbeddedView(null);
this.container_elem.insert(view);
}
}
this.typeConversionst();
}else{
//Do-nothing
}
}
//截取数字，类型转换
typeConversionst(){
let _minutes = this.el.nativeElement.querySelectorAll('.minutes');
//字符串格式
let fontValue_string = this.fontValue.toString();
//转化成number类型，调用设置数值方法，设置数值
if(0 != _minutes.length){
for(let i=0;i<_minutes.length;i++){
this.setNumber(_minutes[i], parseInt(fontValue_string.slice(i,i+1)), 1);
}
}
}
setNumber(digit, number, on){
let segments = digit.querySelectorAll('.segment');
let current = parseInt(digit.getAttribute('data-value'));
if(!isNaN(number)){
//处理数字
this.digitSegments[number].forEach(function(digitSegment, index) {
setTimeout(function() {
segments[digitSegment - 1].classList.add('on');
}, index * 1)
});
digit.setAttribute('data-value', number);
}else{
//Do-nothing
}
}
}
三、使用
图一使用：
<p *ngIf="selfFontStyle == 'clockStyle' && value != '--'" style="height: 140px;line-height: 120px;text-align: right;font-size: 40px;color: #13b4eb;position: relative;float: right;right: 130px;">
<app-led-clockfont [fontValue]="value" *ngIf="selfFontStyle == 'clockStyle'"></app-led-clockfont>
<!-- value = 40.72 -->
</p>
图二使用：
<app-led-clockfont [fontValue]="mapComponentConfig.length"></app-led-clockfont>
<!-- mapComponentConfig.length = 397 -->
四、说明
利用Angular6创建一个led-clockfont组件，目录结构如下图：
css代码详见第二步 css代码，html代码详见第二步 html代码，ts代码详见第二步 ts代码。
使用部分详见第三步