前端有多个option的回显_day56 前端-7

最新推荐文章于 2023-08-02 21:23:23 发布

梁八角

最新推荐文章于 2023-08-02 21:23:23 发布

阅读量289

点赞数

文章标签：前端有多个option的回显

本文链接：https://blog.csdn.net/weixin_36084318/article/details/113367207

版权

一、原生js事件绑定

案例一、开关灯案例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 100px;
            width: 100px;
            border-radius: 50%;
        }
        .by_green{
            background-color: green;
        }
        .by_red{
            background-color: red;
        }

    </style>
</head>

<body>
<div id="d1" class="c1  by_red  by_green"></div>
<button id="d2">变色</button>
<script>
    let btnEle=document.getElementById('d2')
    let divEle=document.getElementById('d1')
    btnEle.onclick=function () {
        divEle.classList.toggle('by_red')

    }

</script>

点击按钮变色

案例二、input框获取焦点失去焦点案例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <input type="text" value="你好，再见" id="d1">
</head>
<body>
<script>
    let iEle=document.getElementById('d1')
    iEle.onfocus=function () {
        iEle.value=''

    }
    iEle.onblur=function () {
        iEle.value='欢迎再来'

    }
</script>

案例三：展示当前时间

<body>
<input type="text" id="d1" style="display: block;height: 50px;width: 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    先定义一个全局存储定时器的变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
     1 访问页面之后 将访问的时间展示到input框中
     2 动态展示当前时间
     3 页面上加两个按钮 一个开始 一个结束
    function showTime() {
        let currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }

    startBtnEle.onclick = function () {
         限制定时器只能开一个
        if(!t){
            t = setInterval(showTime,1000)     每点击一次就会开设一个定时器 而t只指代最后一个
        }
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
         还应该将t重置为空
        t = null
    }
</script>

案件四、省市联动

<body>
<select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区',

最低0.47元/天解锁文章

梁八角

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端有多个option的回显_day56 前端-7

一、原生js事件绑定案例一、开关灯案例<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 100px; width: 100px; b...
复制链接

扫一扫