js灯泡小案例

原创 2019-01-05 10:57:30 408
摘要:js制作灯泡小案例用js控制灯泡开关<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>

js制作灯泡小案例

用js控制灯泡开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>light</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
 .light{width: 300px; height: 300px; margin: 200px auto; line-height: 300px;}
        .light i{border: 1px solid #fff; display: inline-block; color:#f2f2f2; font-size:200px; }
    </style>
    <script type="text/javascript">
 var y=1;
 function lightOpen(x){
                if(y==1){
                    x.style.color='#f2f579';
 y=0;
 }else if(y==0){
                    x.style.color='#f2f2f2';
 y=1;
 }
        }
    </script>
</head>
<body>

<div class="light" >
    <i class="fa fa-lightbulb-o " id="light_1" onclick="lightOpen(this)"></i>
</div>
</body>
</html>


批改老师:天蓬老师批改时间:2019-01-05 14:30:28
老师总结:js函数中的变量使用有意思的单词,尽量避免单个的字母和数字,这在软件开发中叫“魔术字符或魔术变量”,在大项目中是大忌

发布手记

热门词条