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>