用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>

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

用js写一个简单的前世今生相关推荐

JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
使用Node.js写一个简单的api接口
引入Http模块默认你已经安装了Node.js Node当中内置了Http模块: 可以使用 var http= require("http"); 复制代码引入http模块: H ...
原生js写一个简单的编辑器
js原生写的编辑器,主要是使用document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)来实现的如果该指令不被支持或停用将会 ...
用three.js写一个简单的3D射门游戏
这个小游戏很简单,一共由3个部分构成.1个平面(球场),1个球体(足球)还有一个立方体(球门). 上个图给你们感受一下简陋的画风(掘金最高上传5M图片,原来图片都太大了压缩后很不清晰) 当按下空格键时 ...
使用原生js写一个简单的注册登录页面
目录 1.注册页面 2.登录页面 1.首先是我们的注册页面这是我们的html骨架 <!DOCTYPE html> <html lang="en">< ...
js 写一个简单的搜索关键字
随便写下body <h3 id="h3">根据叮咚买菜公开招股书信息显示,自2017年5月自上海起步,叮咚买菜现已覆盖全国29座城市,拥有40个区域处理中心和超过950 ...
Web(前端开发）结合html、css、js写一个简单的相册
该相册制作分为登录.注册和主页面(由于后端没有实现,登录注册只有一些简单的判断),代码如下 (1)登录界面的HTML <!DOCTYPE html> <html lang=" ...
vue结合php增删改查实例,用vue.js写一个简单的增删改查
Title tbody:empty:after { content: '没有找到'; } 姓名年龄操作 {{item.stuName}}{{item.age}}修改删除添加 var app = n ...
js 写一个简单的时间计时器
<body οnlοad="startTime()"><div id="txt" ></div><script> ...

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

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

用js写一个简单的前世今生相关推荐

最新文章

热门文章