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

最新推荐文章于 2024-07-24 16:53:23 发布

置顶史0327

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量2.8k

点赞数 7

分类专栏：前端文章标签： js html javascript

本文链接：https://blog.csdn.net/lcszz0302/article/details/110677395

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

终于知道了古代为什么那么多人都喜欢当皇帝，甚至于不惜打破头颅也要成为皇帝，今天通过一个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>

点个赞再走呗，客官~~~

史0327

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
10
评论
js小案例-皇帝选妃（open()方法和close()方法应用）

终于知道了古代为什么那么多人都喜欢当皇帝，甚至于不惜打破头颅也要成为皇帝，今天通过一个js的小案例我终于明白了。且听我慢慢道来。首先，你需要几张美女的图片图片就自己从网上找，然后自己下载下来，我相信在这方面大家都有自己的审美，这里就不过多赘述。创建HTML文件这里我就以webstorm为例，大家什么工具都可以用，大佬们还可以用记事本。No.1在body下面创建script<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录