用js写一个简单的前世今生

前世今生，没有今生只有前世

刚开始的样子，没有任何的输入

在下面的input内输入自己的名字，然后点击确认

就会有前世的一些内容，具体内容都可以自己修改，我只是简单做了一个demo
css的内容

<style>
			*{margin: 0;padding: 0;}
			a{text-decoration: none;}
			li{list-style: none;}
			
			.box{
				width: 1000px;
				height: 600px;
				background-color: rgba(202, 202, 202, 0.5);
				margin: 0 auto;
			}
			.head{
				width: 100%;
				height: 399px;
				border-bottom: 2px solid red;
				background-color: rgba(76, 36, 116, 1);
			}
			.head>ul{
				width: 100%;
				height: auto;
				text-align: center;
				font-size: 0;
			}
			.head>ul>li{
				display: inline-block;
				width: 230px;
				height: 200px;
				background-color: #FFFFFF;
				color: black;
				font-size: 16px;
				float: left;
				margin: 10px;
				color: #FF0000;
			}
			.head>ul>li>p{
				font-size: 24px;
				color: black;
				line-height: 150px;
			}
			
			.foot{
				width: 100%;
				height: 299px;
				text-align: center;
				line-height: 180px;
			}
			.foot>input{
				width: 300px;
				height: 50px;
				border: 1px solid black;
				margin: 0 auto;
				font-size: 16px;
			}
			.foot>button{
				width: 100px;
				height: 50px;
				border: 1px solid black;
				background-color: white;
				cursor: pointer;
				margin: 0 auto;
			}
		</style>

html的内容

<div class="box">
			<div class="head">
				<ul>
					<li class="li-name">前世姓名<p></p></li>
					<li class="li-country">前世国家<p></p></li>
					<li class="li-work">前世职业<p></p></li>
					<li class="li-died">前世死因<p></p></li>
				</ul>
			</div>
			<div class="foot">
				<input type="text" placeholder="请输入姓名" />
				<button type="button">确认</button>
			</div>
		</div>

js的内容

<script>
			//获取元素
			var input = document.getElementsByTagName('input')[0];
			var but = document.getElementsByTagName('button')[0];
			var pName = document.getElementsByClassName('li-name')[0].getElementsByTagName('p')[0];
			var pCountry = document.getElementsByClassName('li-country')[0].getElementsByTagName('p')[0];
			var pWork = document.getElementsByClassName('li-work')[0].getElementsByTagName('p')[0];
			var pDied = document.getElementsByClassName('li-died')[0].getElementsByTagName('p')[0];
			
			//设置随机元素
			var nameArr = [
				'猪八戒',
				'西门庆',
				'武松',
				'希特勒',
				'爱因斯坦',
				'张三',
				'李四',
				'王五',
				'李云龙',
				'卢本伟',
				'简自卑'
			];
			var countryArr = [
				'中国',
				'日本',
				'韩国',
				'苏联',
				'美利坚',
				'法国',
				'爱尔兰',
				'阿富汗',
				'利比亚',
				'刚果',
				'叙利亚'
			];
			var countryArr = [
				'中国',
				'日本',
				'韩国',
				'苏联',
				'美利坚',
				'法国',
				'爱尔兰',
				'阿富汗',
				'利比亚',
				'刚果',
				'叙利亚'
			];
			var workArr = [
				'车夫',
				'矿工',
				'召唤师',
				'教师',
				'医生',
				'美食家',
				'将军',
				'总统',
				'雇佣兵',
				'小偷',
				'太监'
			];
			var diedArr = [
				'猝死',
				'老死',
				'自杀',
				'中弹',
				'暴食',
				'贪婪',
				'嫉妒',
				'色欲',
				'傲慢',
				'暴怒',
				'懒惰'
			];
			
			//给按钮绑定点击事件
			but.onclick = function(){
				//设置随机前世姓名
				//定义变量接收随机数
				var index = Math.floor(Math.random()*nameArr.length);
				//设置p标签内的姓名
				pName.innerHTML = nameArr[index];
				console.log(pName.innerHTML);
				
				//设置随机前世国家
				//定义变量接收随机数
				var index = Math.floor(Math.random()*countryArr.length);
				//设置p标签内的国家
				pCountry.innerHTML = countryArr[index];
				console.log(pCountry.innerHTML);
				
				//设置随机前世职业
				//定义变量接收随机数
				var index = Math.floor(Math.random()*workArr.length);
				//设置p标签内的职业
				pWork.innerHTML = workArr[index];
				console.log(pWork.innerHTML);
				
				//设置随机前世死因
				//定义变量接收随机数
				var index = Math.floor(Math.random()*diedArr.length);
				//设置p标签内的死因
				pDied.innerHTML = diedArr[index];
				console.log(pDied.innerHTML);
			}
		</script>

大家可以根据自己的需要去修改里面的内容