Angular6封装LED时钟数字组件
一、运行截图
截图1：
截图2：
二、代码
html代码：
1 <div class="time" > 2 <ng-container #container> 3 4 </ng-container> 5 </div> 6 7 8 <ng-template #child_elem> 9 <div class="digit minutes"> 10 <div class="segment "></div> 11 <div class="segment "></div> 12 <div class="segment "></div> 13 <div class="segment "></div> 14 <div class="segment "></div> 15 <div class="segment "></div> 16 <div class="segment "></div> 17 </div> 18 </ng-template> 19 20 <ng-template #point_elem> 21 <div class="separator minutes"></div> 22 </ng-template>
css代码：
1 .time { 2 height: 40px; 3 position: absolute; 4 top: 0; 5 left: 28%; 6 width: 100px; 7 margin-left: 0px; 8 text-align: center; 9 z-index: 1000; 10 margin-top: -7px; 11 } 12 .time .digit { 13 width: 16px; 14 height: 44px; 15 position: relative; 16 display: inline-block; 17 margin-top: 2px; 18 } 19 20 21 .digit .segment { 22 background:#11c4fb; 23 border-radius:2px; 24 position:absolute; 25 opacity:0.1; 26 transition:opacity 0.2s; 27 -webkit-transition:opacity 0.2s; 28 -ms-transition:opacity 0.2s; 29 -moz-transition:opacity 0.2s; 30 -o-transition:opacity 0.2s; 31 } 32 33 .digit .segment.on, .separator { 34 opacity:1; 35 background:#11c4fb; 36 box-shadow:0 0 30px rgba(0,255,0,0.1); 37 transition:opacity 0s; 38 -webkit-transition:opacity 0s; 39 -ms-transition:opacity 0s; 40 -moz-transition:opacity 0s; 41 -o-transition:opacity 0s; 42 } 43 44 .time .separator { 45 width: 4px; 46 height: 4px; 47 background: #11c4fb; 48 border-radius: 50%; 49 display: inline-block; 50 position: relative; 51 bottom: 10px; 52 } 53 54 55 .digit .segment:nth-child(1) { 56 top: 10px; 57 left: 4px; 58 right: 4px; 59 height: 2px; 60 background: #11c4fb; 61 } 62 63 .digit .segment:nth-child(2) { 64 top: 12px; 65 right: 1px; 66 width: 2px; 67 height: 75px; 68 height: calc(71% - 21px); 69 background: #11c4fb; 70 } 71 72 .digit .segment:nth-child(3) { 73 bottom: 10px; 74 right: 1px; 75 width: 2px; 76 height: 72px; 77 height: calc(71% - 21px); 78 background: #11c4fb; 79 } 80 81 .digit .segment:nth-child(4) { 82 bottom: 8px; 83 right: 4px; 84 height: 2px; 85 left: 4px; 86 background: #11c4fb; 87 } 88 89 .digit .segment:nth-child(5) { 90 bottom: 12px; 91 left: 2px; 92 width: 2px; 93 height: 75px; 94 height: calc(70% - 24px); 95 background: #11c4fb; 96 } 97 98 .digit .segment:nth-child(6) { 99 top: 14px; 100 left: 2px; 101 width: 2px; 102 height: 75px; 103 height: calc(70% - 24px); 104 background: #11c4fb; 105 } 106 107 .digit .segment:nth-child(7) { 108 bottom: 95px; 109 bottom: calc(71% - 11px); 110 right: 4px; 111 left: 4px; 112 height: 2px; 113 background: #11c4fb; 114 }
ts代码：
1 import { Component, OnInit, Input, ViewChild, ViewContainerRef, TemplateRef, ElementRef, QueryList, SimpleChanges } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-led-clockfont', 5 templateUrl: './led-clockfont.component.html', 6 styleUrls: ['./led-clockfont.component.css'] 7 }) 8 export class LedClockfontComponent implements OnInit { 9 @ViewChild("container", {read: ViewContainerRef}) container_elem: ViewContainerRef; 10 @ViewChild("child_elem") tpl_elem: TemplateRef<any>; 11 @ViewChild("point_elem") tpl_point_elem: TemplateRef<any>; 12 @Input() fontValue:number = 0; 13 14 //数值模型数组，0,1,2,3,4,5,6,7,8,9 15 private digitSegments = [ 16 [1, 2, 3, 4, 5, 6], 17 [2, 3], 18 [1, 2, 7, 5, 4], 19 [1, 2, 7, 3, 4], 20 [6, 7, 2, 3], 21 [1, 6, 7, 3, 4], 22 [1, 6, 5, 4, 3, 7], 23 [1, 2, 3], 24 [1, 2, 3, 4, 5, 6, 7], 25 [1, 2, 7, 3, 6, 4] 26 ] 27 constructor(private el:ElementRef) { 28 29 } 30 31 ngOnInit() { 32 33 } 34 35 36 ngOnChanges(changes: SimpleChanges): void { 37 if(parseFloat(this.fontValue.toString())){ 38 this.createDomContainer(); 39 }else{ 40 //Do-nothing 41 } 42 // this.createDomContainer(); 43 44 } 45 46 47 48 createDomContainer(){ 49 //根据当前数值长度处理DOM容器 50 if(0 !== this.fontValue.toString().length){ 51 //清空容器内视图 52 this.container_elem.clear(); 53 //处理容器内视图 54 let view = null; 55 let point_index = this.fontValue.toString().indexOf('.'); 56 for(let i=0;i<this.fontValue.toString().length;i++){ 57 if((-1 != point_index) && (i == point_index)){ 58 view = this.tpl_point_elem.createEmbeddedView(null); 59 this.container_elem.insert(view); 60 }else{ 61 view = this.tpl_elem.createEmbeddedView(null); 62 this.container_elem.insert(view); 63 } 64 } 65 this.typeConversionst(); 66 }else{ 67 //Do-nothing 68 } 69 } 70 71 //截取数字，类型转换 72 typeConversionst(){ 73 let _minutes = this.el.nativeElement.querySelectorAll('.minutes'); 74 //字符串格式 75 let fontValue_string = this.fontValue.toString(); 76 //转化成number类型，调用设置数值方法，设置数值 77 if(0 != _minutes.length){ 78 for(let i=0;i<_minutes.length;i++){ 79 this.setNumber(_minutes[i], parseInt(fontValue_string.slice(i,i+1)), 1); 80 } 81 } 82 } 83 84 setNumber(digit, number, on){ 85 let segments = digit.querySelectorAll('.segment'); 86 let current = parseInt(digit.getAttribute('data-value')); 87 if(!isNaN(number)){ 88 //处理数字 89 this.digitSegments[number].forEach(function(digitSegment, index) { 90 setTimeout(function() { 91 segments[digitSegment - 1].classList.add('on'); 92 }, index * 1) 93 }); 94 digit.setAttribute('data-value', number); 95 }else{ 96 //Do-nothing 97 } 98 } 99 100 }
三、使用
图一使用：
1 <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;"> 2 <app-led-clockfont [fontValue]="value" *ngIf="selfFontStyle == 'clockStyle'"></app-led-clockfont> 3 <!-- value = 40.72 --> 4 </p>
图二使用：
1 <app-led-clockfont [fontValue]="mapComponentConfig.length"></app-led-clockfont> 2 <!-- mapComponentConfig.length = 397 -->
四、说明
利用Angular6创建一个led-clockfont组件，目录结构如下图：
css代码详见第二步 css代码，html代码详见第二步 html代码，ts代码详见第二步 ts代码。
使用部分详见第三步
