点击按钮显示网页

最新推荐文章于 2024-07-20 14:15:00 发布

沫栀丶

最新推荐文章于 2024-07-20 14:15:00 发布

阅读量929

点赞数 1

本文链接：https://blog.csdn.net/weixin_44578685/article/details/90263415

版权

开发工具与关键技术： MVC
作者：郑健鹏
撰写时间：2019年5月16日

这次的网页实现的效果是点击上方的网页名称，当某一个选项被选择时在下方的文本框内显示当前选项所对应的网址和介绍，文本框下方还有一个跳转按钮，当点击跳转按钮后则会在当前网页跳转到文本框内所显示的页面，当没有选择时点击跳转按钮会弹出提示框，提示没有选择网站，请重新选择。
这个页面所使用的js代码是判断选择的是哪一个网页以及是否选择网页，判断方法是if和else，给每个网页绑定一个值，选择后在文本标签回填出来。
下面是网页所使用的的js代码：
~~~~

    var refcnum = "";
    var layer;
    $(document).ready(function () {
        layui.use('layer', function () {
            layer = layui.layer;
        });
    });
    function initArray() {
        this.length = initArray.arguments.length;
        for (var i = 0; i < this.length; i++)
        { this[i] = initArray.arguments[i]; }
    }
    var rcrd = new initArray();
    var address = new initArray();

    rcrd[1] = "百度\r\n国内综合性站点";
    address[1] = "http://www.baidu.com";

    rcrd[2] = "新浪网\r\n国内最大的新闻站点";
    address[2] = "http://www.sina.com.cn";

    rcrd[3] = "搜狐\r\n国内最大的搜索引擎站点";
    address[3] = "http://www.sohu.com";

    rcrd[4] = "知乎\r\n有问题，上知乎";
    address[4] = "http://www.zhihu.com";
    function dataBase(leapto) {
        for (var i = 0; i < 4; i++) {
            if (leapto.buttons[i].checked)
            { recnum = leapto.buttons[i].value; }
        }
        if ((rcrd[recnum] != null) && (rcrd[recnum] != ""))
        { document.leapto.display.value = rcrd[recnum] + "\r\n\r\n" + address[recnum]; }
    }
    function leapTo() {
        if ((address[recnum] != null) && (address[recnum] != "") && (recnum != ""))
            window.location = address[recnum];
        else {
            layer.alert("没有选择网站，请重新选择");
        }
    }



	以下则是这个网页的基本样式和实现功能的代码
	
<div class="container-fluid pt-5">
        <form class="container" name="leapto">
            <table class="col">
                <tr>
                    <td align="center" class="bg-primary">
                        <input type="radio" name="buttons" value="1" onclick="dataBase(this.form)">
                        <font><b>百度</b></font>
                    <td align="center" class="bg-info">
                        <input type="radio" name="buttons" value="2" onClick="dataBase(this.form)">
                        <font><b>新浪</b></font>
                    <td align="center" class="bg-secondary">
                        <input type="radio" name="buttons" value="3" onClick="dataBase(this.form)">
                        <font><b>搜狐</b></font>
                    <td align="center" class="bg-success">
                        <input type="radio" name="buttons" value="4" onClick="dataBase(this.form)">
                        <font><b>知乎</b></font>
                </tr>
            </table>
            <br><br>
            <textarea class="form-control" name="display" rows=4 cols=25></textarea>
            <input type="button" value="去看看" class="btn btn-primary" onClick="leapTo()">
        </form>
</div>