随机动态添加城市

最新推荐文章于 2022-02-02 13:14:20 发布

黄桃乳酪派

最新推荐文章于 2022-02-02 13:14:20 发布

阅读量962

点赞数 1

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

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

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

webapi

4 篇文章 0 订阅

订阅专栏

<!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>

黄桃乳酪派

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
随机动态添加城市

<!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 t
复制链接

扫一扫