终于知道了古代为什么那么多人都喜欢当皇帝,甚至于不惜打破头颅也要成为皇帝,今天通过一个js的小案例我终于明白了。
且听我慢慢道来~~~
No.1首先,你需要几张美女的图片
图片就自己从网上找,然后自己下载下来,我相信在这方面大家都有自己的审美,这里就不过多赘述。
No.2创建HTML文件
这里我就以webstorm为例,大家什么工具都可以用,大佬们还可以用记事本。
No.3在body下面创建script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>皇帝选妃</title>
</head>
<body>
</body>
<script>
//这里写js代码
</script>
</html>
No.4在body里面写一个表格table
这个表格用来放各个美女的信息。
这里我们为了演示就只写一些简单的信息就可,大家可以自行添加自己喜欢的美女信息。
- 写一个 tr 标签,这个tr大家想要写几行就写几个tr。
- 第一个tr里面我们写th,th表示表格的第一行 ,也就是每一列的标题。表格有几列我们就写几个th标签。
- 我们在th里面写入编号、宠妃、颜值、翻牌等内容。
- 第二行我们就可以在表格里面写一些具体的宠妃的信息了,这里我们以妲己、西施、貂蝉和金莲为例,大家可以具体的看自己的爱好来添加。
- 在宠妃的信息里面的最后一个td标签里面我们创建一个input标签,给input一个点击事件叫 choose(this),待会在js里面写具体的函数。
<table border="" cellpadding="15" cellspacing="0">
<tr>
<th>编号</th>
<th>宠妃</th>
<th>颜值</th>
<th>翻牌</th>
</tr>
<tr>
<td>1</td>
<td>妲己</td>
<td>500</td>
<td>
<input type="button" value="翻牌" onclick="choose(this)" >
</td>
</tr>
<tr>
<td>2</td>
<td>西施</td>
<td>280</td>
<td>
<input type="button" value="翻牌" onclick="choose(this)">
</td>
</tr>
<tr>
<td>3</td>
<td>貂蝉</td>
<td>260</td>
<td>
<input type="button" value="翻牌" onclick="choose(this)">
</td>
</tr>
<tr>
<td>4</td>
<td>金莲</td>
<td>380</td>
<td>
<input type="button" value="翻牌" onclick="choose(this)">
</td>
</tr>
</table>
No.5试看和不要
在table下面写两个input标签,分别给两个input的value赋值,一个赋值为试看,一个赋值为不要。
在上面绑定两个方法,叫show()和close1(),type我们取button按钮。
<input type="button" value="试看" onclick="show()">
<input type="button" value="不要" onclick="close1()">
No.6接下来写js代码
这里给大家介绍一个两个方法open()和close(),这两个方法是js的BOM里面的window里面的方法,具体的作用是show()是打开一个新的窗口,close()是关闭窗口。这种方法可以直接使用不用单独的去创建函数再调用。
js代码比较简单,简简单单的两个方法就可以了
- 用newWin表示新的窗口
- show()方法:直接使用open()方法,open()方法默认是三个参数,第一个参数是跳转的窗口的URL值,大家在网上下载的美女图片的路径写在这里;第二个是打开新窗口,还是在本窗口打开,有两个选择,第一是blank,就是打开新窗口,第二是==_self==,这个是在本窗口打开,默认是_blank,也就是打开一个新的窗口。大家可以自己选择,这里我们就取默认的;第三个是要打开的窗口的大小。
- close1()方法:因为关闭窗口的方法名是close(),所以这里我们就叫close1()好了。这个就更简单了,直接用我们刚才的newWin去调用close()即可。
function show(){
newWin= open("../img/"+name.value+".jpg","_self","width=200,height=200")
}
function close1(){
newWin.close()
}
这样一个简单的皇帝选妃的案例就写好了~~~
下面附上完整的代码~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>皇帝选妃</title>
</head>
<body>
<table border="" cellpadding="15" cellspacing="0">
<table border="" cellpadding="15" cellspacing="0">
<tr>
<th>编号</th>
<th>宠妃</th>
<th>颜值</th>
<th>翻牌</th>
</tr>
<tr>
<td>1</td>
<td>妲己</td>
<td>500</td>
<td>
<input id="inp1" type="button" value="翻牌" onclick="choose(this)" >
</td>
</tr>
<tr>
<td>2</td>
<td>西施</td>
<td>280</td>
<td><input type="button" value="翻牌" onclick="choose(this)"></td>
</tr>
<tr>
<td>3</td>
<td>貂蝉</td>
<td>260</td>
<td><input type="button" value="翻牌" onclick="choose(this)"></td>
</tr>
<tr>
<td>4</td>
<td>金莲</td>
<td>380</td>
<td><input type="button" value="翻牌" onclick="choose(this)"></td>
</tr>
</table>
</table>
</body>
<script>
//这里写js代码
function show(){
newWin= open("../img/"+name.value+".jpg","_self","width=200,height=200")
}
function close1(){
newWin.close()
}
</script>
</html>