简易版本html红黄绿灯Vue

最新推荐文章于 2023-12-14 11:24:07 发布

Fanzongshen

最新推荐文章于 2023-12-14 11:24:07 发布

阅读量1.1k

点赞数

分类专栏： html 文章标签： vue

本文链接：https://blog.csdn.net/Fanzongshen/article/details/118532349

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用简单的vue完成html制作红黄绿灯交互的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red{
				background-color: red;
			}
			
			.green{
				background-color: green;
			}
			
			.yellow{
				background-color: yellow;
			}
			.white{
				background-color: white;
			}
			.light{
				width: 150px;
				height: 150px;
				border-radius: 50%;
				margin-left: 200px;
		</style>
	</head>
	<body>
		<div id="app">
			<p>
				 <h3>{{name}}</h3>
				  倒计时:<input type="text"  v-model="number"/>秒
			</p>
			<div class="light" v-bind:class="{red:showRed,green:showGreen,yellow:showYellow,white:showWhite}"></div>
		</div>		
	</body>
	<script src="js/vue.js"></script>
	<script>
		var app =new Vue({
			 el: '#app',
			 data:{
				 name:'红灯',
				 number:5,
				 showRed:true,
				 showGreen:false,
				 showYellow:false,
				 showWhite:false,
				 count:0
			 },
			 methods:{
				 start(){
					 if(this.number==1&&this.showRed){
						   this.name='黄灯';
						   this.showRed=false;
						   this.showGreen=false;
						   this.showYellow=true;
					 }else if(this.number==1&&this.showYellow){
						 this.name='绿灯';
						 this.showRed=false;
						 this.showGreen=true;
						 this.showYellow=false;
					 }else if(this.number==1&&this.showGreen){
						 this.name='红灯';
						 this.showRed=true;
						 this.showGreen=false;
						 this.showYellow=false;
					 }
					 
					 if(this.number-1>0){
						 this.number--;
					 }else{
						 if(this.showYellow){
							 this.number=3;
						 }else{
							 this.number=5;
						 }
					 }
					 this.count++;
					 if(this.count%2==0){
						 this.showWhite=true;
					 }else{
						 this.showWhite=false;
					 }
					 /* int 防止越界*/
					 if(this.count>10000){
						 this.count=0;
					 }
				 }
			 },
			 created() {
			 	setInterval(this.start,1000);
			 }
		})
	</script>
		
</html>

最终实现效果
在这里插入图片描述

Fanzongshen

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
简易版本html红黄绿灯Vue

使用简单的vue完成html制作红黄绿灯交互的实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .red{ background-color: red; } .green{ background-color: green; } .yellow
复制链接

扫一扫

专栏目录