js小案例-皇帝选妃（open()方法和close()方法应用）

终于知道了古代为何那么多人都喜欢当皇帝，甚至于不惜打破头颅也要成为皇帝，今天经过一个js的小案例我终于明白了。
且听我慢慢道来~~~
javascript

No.1首先，你须要几张美女的图片

图片就本身从网上找，而后本身下载下来，我相信在这方面你们都有本身的审美，这里就不过多赘述。html

No.2建立HTML文件

这里我就以webstorm为例，你们什么工具均可以用，大佬们还能够用记事本。java

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

这个表格用来放各个美女的信息。
这里咱们为了演示就只写一些简单的信息就可，你们能够自行添加本身喜欢的美女信息。
web

写一个 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按钮。
webstorm

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