6.2.12 点击有惊喜

最新推荐文章于 2024-08-21 14:09:37 发布

weixin_30439067

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/beallaliu/p/9347744.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			.box{
				width: 200px;
				height: 200px;
				background: red;
				text-align: center;
				color: white;
				line-height: 200px;
				font-size: 23px;
				font-weight: bold;
				margin: 20px auto;
				}
		</style>
	</head>
	<body>
		<div class="box">
			点击有惊喜！！
		</div>
		<!--<div class="box"></div>-->
	</body>
	<script type="text/javascript">
		
		var oBox = document.getElementsByClassName('box')[0];
		console.log(oBox.innerText);
		
		var a = 0;
		
		oBox.onclick  = function(){
			a++;
			if(a%4===1){
				this.style.background = 'green';
				this.innerText = '继续点击哦！';
			}else if(a%4==2){
				this.style.background = 'blue';
				this.innerText = '哈哈！骗你的';
			}else if(a%4==3){
				this.style.background = 'transparent';
				this.innerText = '';
			}else{
				this.style.background = 'red';
				this.innerText = '点击有惊喜！！';
			}	
			
		}
		
	</script>
</html>

转载于:https://www.cnblogs.com/beallaliu/p/9347744.html

weixin_30439067

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.2.12 点击有惊喜

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} .box{ width: ...
复制链接

扫一扫