随机动态添加城市

最新推荐文章于 2024-03-18 09:32:44 发布

黄桃乳酪派

最新推荐文章于 2024-03-18 09:32:44 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript webapi 文章标签： javascript

本文链接：https://blog.csdn.net/u012271799/article/details/115910855

版权

JavaScript 同时被 2 个专栏收录

8 篇文章

订阅专栏

webapi

4 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个动态的城市列表。通过点击按钮即可向列表中添加新的城市名称，城市名称从预设的数据集中随机选取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="添加新城市" id="city" />
    <ul id="ul1">
        <!-- <li>北京</li>
        <li>天津</li>
        <li>南京</li> -->
    </ul>
    <script>
        //         2.实现动态添加城市的功能，要求如下:
        // 1)城市名称要求放在数据列表中，在进行渲染
        // 2)点击添加新城市，在城市列表中会添加一个新的城市（城市名可以固定 可以随机生成）

        let list = ['北京', '天津', '南京']

        let ul = document.querySelector('ul')

        fn();


        let citys = ['沈阳', '长春', '上海', '南京', '武汉', '广州', '重庆', '成都', '西安']

        let bt = document.querySelector('#city')

        bt.addEventListener('click', function () {
            list.push(
                citys[getRandom(8, 1)]
            )
            render();
        })


        // 获取随机数
        function getRandom(max, min) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }

        // 渲染最新页面
        function render() {
            ul.innerHTML = list.map(function (i) {
                return `
            <li>${i}</li>
            `
            }).join('')
        }

    </script>
</body>

</html>