digital-clock-vue
Version:
️A digital clock simulation build on Vue.
1 lines • 8.68 kB
JavaScript
var DigitalClockVue=function(t){"use strict";var e={name:"digital-number",props:{num:{type:[Number,String],default:8,validator:function(t){return parseInt(t)>=0&&parseInt(t)<=9}},color:{type:String,default:"red"}},computed:{showTop:function(){return 1!==parseInt(this.num)&&4!==parseInt(this.num)},showMiddle:function(){return[2,3,4,5,6,8,9].indexOf(parseInt(this.num))>-1},showBottom:function(){return[2,3,5,6,8,9,0].indexOf(parseInt(this.num))>-1},showLt:function(){return[4,5,6,8,9,0].indexOf(parseInt(this.num))>-1},showLb:function(){return[2,6,8,0].indexOf(parseInt(this.num))>-1},showRt:function(){return 5!==parseInt(this.num)&&6!==parseInt(this.num)},showRb:function(){return 2!==parseInt(this.num)}}};function i(t,e,i,n,o,s,a,r,d,l){"boolean"!=typeof a&&(d=r,r=a,a=!1);const c="function"==typeof i?i.options:i;let u;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),n&&(c._scopeId=n),s?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=u):e&&(u=a?function(t){e.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),u)if(c.functional){const t=c.render;c.render=function(e,i){return u.call(i),t(e,i)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,u):[u]}return i}const n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(t){return(t,e)=>function(t,e){const i=n?e.media||"default":t,o=a[i]||(a[i]={ids:new Set,styles:[]});if(!o.ids.has(t)){o.ids.add(t);let i=e.source;if(e.map&&(i+="\n/*# sourceURL="+e.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",e.media&&o.element.setAttribute("media",e.media),void 0===s&&(s=document.head||document.getElementsByTagName("head")[0]),s.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(i),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const t=o.ids.size-1,e=document.createTextNode(i),n=o.element.childNodes;n[t]&&o.element.removeChild(n[t]),n.length?o.element.insertBefore(e,n[t]):o.element.appendChild(e)}}}(t,e)}let s;const a={};var r=i({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"digital-number"},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showTop,expression:"showTop"}],staticClass:"top",style:{background:t.color}}),t._v(" "),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showRt,expression:"showRt"}],staticClass:"rt",style:{background:t.color}}),t._v(" "),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showMiddle,expression:"showMiddle"}],staticClass:"middle",style:{background:t.color}}),t._v(" "),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showRb,expression:"showRb"}],staticClass:"rb",style:{background:t.color}}),t._v(" "),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showBottom,expression:"showBottom"}],staticClass:"bottom",style:{background:t.color}}),t._v(" "),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showLt,expression:"showLt"}],staticClass:"lt",style:{background:t.color}}),t._v(" "),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showLb,expression:"showLb"}],staticClass:"lb",style:{background:t.color}})])},staticRenderFns:[]},(function(t){t&&t("data-v-513d4d3c_0",{source:".digital-number[data-v-513d4d3c]{float:left;position:relative}.digital-number .top[data-v-513d4d3c]{position:absolute;top:0;left:0;width:100%;height:8%;clip-path:polygon(10% 0,90% 0,95% 28%,87% 100%,13% 100%,5% 28%)}.digital-number .middle[data-v-513d4d3c]{position:absolute;width:100%;height:8%;top:50%;transform:translateY(-50%);clip-path:polygon(12.5% 0,87.5% 0,94% 50%,87.5% 100%,12.5% 100%,6% 50%)}.digital-number .bottom[data-v-513d4d3c]{position:absolute;width:100%;bottom:0;height:8%;clip-path:polygon(13% 0,87% 0,95% 72%,90% 100%,10% 100%,5% 72%)}.digital-number .lt[data-v-513d4d3c]{position:absolute;width:12%;height:50%;top:0;left:0;clip-path:polygon(38% 5%,100% 16%,100% 91.5%,45% 99.5%,0 93.4%,0 9%)}.digital-number .lb[data-v-513d4d3c]{position:absolute;width:12%;height:50%;bottom:0;left:0;clip-path:polygon(45.2% .6%,100% 8.5%,100% 84%,38% 95%,0 91%,0 7.5%)}.digital-number .rt[data-v-513d4d3c]{position:absolute;width:12%;height:50%;top:0;right:0;clip-path:polygon(62% 5%,100% 9%,100% 93.4%,55% 99.5%,0 91.5%,0 16%)}.digital-number .rb[data-v-513d4d3c]{position:absolute;width:12%;height:50%;bottom:0;right:0;clip-path:polygon(54.8% .6%,100% 7.5%,100% 91%,62% 95%,0 84%,0 8.5%)}",map:void 0,media:void 0})}),e,"data-v-513d4d3c",!1,void 0,!1,o,void 0,void 0),d=i({render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"time-twink"},[e("svg",{directives:[{name:"show",rawName:"v-show",value:this.twink,expression:"twink"}],staticClass:"dot",attrs:{version:"1.1",xmlns:"http://www.w3.org/2000/svg"}},[e("circle",{attrs:{fill:this.color,cx:"50%",cy:"30%",r:"5%"}}),this._v(" "),e("circle",{attrs:{fill:this.color,cx:"50%",cy:"70%",r:"5%"}})])])},staticRenderFns:[]},(function(t){t&&t("data-v-48a344e1_0",{source:".time-twink[data-v-48a344e1]{width:100%}.time-twink .dot[data-v-48a344e1]{width:100%;height:100%}",map:void 0,media:void 0})}),{name:"time-twink",data:function(){return{}},props:{color:{type:String},twink:{type:Boolean,default:!0}}},"data-v-48a344e1",!1,void 0,!1,o,void 0,void 0),l=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){setTimeout(t,1e3/60)},c=i({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"digital-clock-vue"},[i("digital-number",{style:{width:t.numWidth,height:"100%"},attrs:{color:t.color,num:t.h1}}),t._v(" "),i("digital-number",{style:{width:t.numWidth,height:"100%"},attrs:{color:t.color,num:t.h2}}),t._v(" "),i("time-twink",{staticClass:"twink",style:{width:t.twinkWidth},attrs:{color:t.color,twink:t.twink}}),t._v(" "),i("digital-number",{style:{width:t.numWidth,height:"100%"},attrs:{color:t.color,num:t.m1}}),t._v(" "),i("digital-number",{style:{width:t.numWidth,height:"100%"},attrs:{color:t.color,num:t.m2}}),t._v(" "),t.showSeconds?i("time-twink",{staticClass:"twink",style:{width:t.twinkWidth},attrs:{color:t.color,twink:t.twink}}):t._e(),t._v(" "),t.showSeconds?i("digital-number",{style:{width:t.numWidth,height:"100%"},attrs:{color:t.color,num:t.s1}}):t._e(),t._v(" "),t.showSeconds?i("digital-number",{style:{width:t.numWidth,height:"100%"},attrs:{color:t.color,num:t.s2}}):t._e()],1)},staticRenderFns:[]},(function(t){t&&t("data-v-371fcd32_0",{source:".digital-clock-vue[data-v-371fcd32]{box-sizing:border-box}.digital-clock-vue .twink[data-v-371fcd32]{height:100%;float:left}.digital-clock-vue .digital-number[data-v-371fcd32]{margin:0 1%}.digital-clock-vue .digital-number[data-v-371fcd32]:first-child{margin-left:0}.digital-clock-vue .digital-number[data-v-371fcd32]:last-child{margin-right:0}",map:void 0,media:void 0})}),{components:{digitalNumber:r,timeTwink:d},data:function(){return{time:new Date}},mounted:function(){l(this.addTime)},computed:{hours:function(){return this.time.getHours()},minutes:function(){return this.time.getMinutes()},seconds:function(){return this.time.getSeconds()},h1:function(){return this.hours<10?0:parseInt(this.hours%100/10)},h2:function(){return this.hours<10?this.hours:parseInt(this.hours%10)},m1:function(){return this.minutes<10?0:parseInt(this.minutes%100/10)},m2:function(){return this.minutes<10?this.minutes:parseInt(this.minutes%10)},s1:function(){return this.seconds<10?0:parseInt(this.seconds%100/10)},s2:function(){return this.seconds<10?this.seconds:parseInt(this.seconds%10)},twink:function(){return this.s2%2==0},numWidth:function(){return this.showSeconds?"14%":"22%"},twinkWidth:function(){return this.showSeconds?"3%":"6%"}},props:{color:{type:String,default:"red"},showSeconds:{type:Boolean,default:!1}},methods:{addTime:function(){this.time=new Date,l(this.addTime)}}},"data-v-371fcd32",!1,void 0,!1,o,void 0,void 0),u=function(t){u.installed||(u.installed=!0,t.component("DigitalClockVue",c))},h={install:u},m=null;return"undefined"!=typeof window?m=window.Vue:"undefined"!=typeof global&&(m=global.Vue),m&&m.use(h),c.install=u,t.DigitalNumber=r,t.default=c,t}({});