js小案例-皇帝選妃（open()方法和close()方法應用）-有解無憂

終于知道了古代為什么那么多人都喜歡當皇帝，甚至于不惜打破頭顱也要成為皇帝，今天通過一個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>

點個贊再走唄，客官~~~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230741.html

標籤：其他

上一篇：form表單的input上傳檔案

下一篇：Spring 注解面面通之 @RequestParam引數系結原始碼決議