汇智网练习:修改示例代码,使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 );              
原文地址:https://www.cnblogs.com/dahehui/p/6213862.html