利用js实现简易红绿灯

2022-01-14,,,

这篇文章主要介绍了利用js实现简易红绿灯,帮助大家更好的利用js制作特效,美化网页,感兴趣的朋友可以了解下

HTML代码:

在一个div容器内,设置3个span

   

CSS代码:

  .red_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: red; } .yellow_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: yellow; } .green_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: green; } .light { width: 200px; height: 200px; background-color: #777777; border-radius: 50%; margin-left: 10px; display: inline-block; } #i1 { width: 660px; height: 200px; margin: 0 auto; border: black 10px solid; } 

JS代码

 

运行效果

以上就是利用js实现简易红绿灯的详细内容,更多关于js 实现红绿灯的资料请关注本站其它相关文章!

以上就是利用js实现简易红绿灯的详细内容,更多请关注本站其它相关文章!

《利用js实现简易红绿灯.doc》

下载本文的Word格式文档,以方便收藏与打印。