汇智网练习:修改示例代码,使EzApp组件的标题颜色每秒钟随机变化一次
1.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>template - bind propery</title> <script type="text/javascript" src="lib/system@0.16.11.js"></script> <script type="text/javascript" src="lib/angular2.dev.js"></script> <script type="text/javascript" src="lib/system.config.js"></script> </head> <body> <ez-app></ez-app> <script type="module"> import {bind,Component,View,bootstrap} from "angular2/angular2"; @Component({selector:"ez-app"}) @View({ template:`<h1 [style.color]="color" id="color">Hello,Angular2</h1> ` }) class EzApp{ constructor(){ this.color='red'; setInterval(()=>{ this.color='#'+parseInt(Math.random()*0xffffff).toString(16); },1000); } } bootstrap(EzApp); </script> </body> </html>
2.把constructor的内容换成以下代码也可以
this.color='red';
var self=this;
setInterval(function(){
self.color='#'+parseInt(Math.random()*0xffffff).toString(16);
},1000);
3.把constructor的内容换成以下代码也可以
this.color = "red";
setInterval(()=>{
var red=parseInt(Math.random()*255);
var blue=parseInt(Math.random()*255);
var green=parseInt(Math.random()*255);
var color="#"+red.toString(16)+blue.toString(16)+green.toString(16);
document.getElementById("color").style.color=color;
},1000 );
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步