input输入文字输出对应的内容（如果有图片显示，

html代码：

<input type="text" size="20" value="" id="value"/>
<button onclick="btn()">生成</button>
<span id="result" class="font"></span>

JS代码

function btn(){
    //需要转换的图片
    var imgArr =[{
        name:'中',
        img:'img/ba.png',
        value:''
    },{
        name:'国',
        img:'img/ban.png',
        value:''
    },{
        name:'人',
        img:'img/bai.png',
        value:''
    }]

    //获取input内容
    let _value = document.getElementById('value').value
    let _valueArr = []
    for(let i=0; i<_value.length; i++){
        _valueArr.push({
            name: _value[i],
            img:'',
            value:_value[i]
        })
    }

    //2个数组合并
    const _merge = _valueArr.map(item => {
        const data = imgArr.find(i => item.name == i.name)
        return {
          ...item,
          ...data
        }
    })

    //遍历插入
    let _result = []
    for(let i=0; i<_merge.length; i++){
        if(_merge[i].img != ''){
            _result += '<img src="' + _merge[i].img + '" style="width:30px;background-size:100%">'
        }else{
            _result += '<i>' + _merge[i].value + '</i>'
        }
    }
    document.getElementById('result').innerHTML = _result
}

OA图书馆：一个致力于让中国人免费获得高质量文献的在线平台

蓝铅笔官网：一个专业的板绘及动画学习和培训平台

三节课：一家专注于互联网产品和运营领域的在线教育平台

黑盒工坊官网：轻松管理你的魔兽插件

Godaddy官网：全球最大的域名注册商和互联网服务提供商之一

上面是“input输入文字输出对应的内容（如果有图片显示，”的全面内容，想了解更多关于 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_125.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！