js动态弹窗

最新推荐文章于 2021-12-24 16:39:07 发布

原创最新推荐文章于 2021-12-24 16:39:07 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一个基于HTML, CSS和JavaScript的游戏关卡设计案例，通过动态创建元素和交互来实现游戏失败和成功的不同场景，同时提供了重新开始和进入下一关的功能。

html及css基本样式

		<p>关卡1</p>
		<button id="los" type="button">失败</button>
		<button id="vic" type="button">成功</button>
		<div id="con"></div>

			.box{
				width: 200px;
				height: 200px;
				background: #F5F5DC;
				margin-left: -100px;
				margin-top: -100px;
				position: absolute;
				left: 50%;
				top: 50%;
				border-radius: 10px;
			}

js实现效果

			var p = document.getElementsByTagName('p')[0]
			var level=1
			function $ (id){
				return document.getElementById(id)
			}
			$("los").onclick=function(){
				var div = document.createElement('div');
				div.className='box';
				div.innerHTML='<button class="agi">重玩一次</button>'
				$('con').appendChild(div)
			}
			$("vic").onclick=function(){
				$('con').innerHTML=''
				var div = document.createElement('div');
				div.className='box';
				div.innerHTML='<button class="agi">重玩一次</button><button class="next">下一关</button>'
				$('con').appendChild(div)
			}
			document.onclick=function(e){
				var className = e.target.getAttribute("class")
				if (className=="agi") {
					$('con').innerHTML=''
				} 
				if(className=="next"){
					$('con').innerHTML='';
					level++;
					p.innerHTML='关卡'+level
				}
			}