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
}

迅捷画图官网入口，一款专业的在线绘图工具

天猫商家成长平台官网入口，提供培训、工具、策略支持等方式

心动AI简历：帮助求职者快速、高效地制作出专业、个性化的简历

小虫快读BugQR：通过拍照书籍页面，能够自动识别并总结书籍内容

悦灵犀AI：一个在线的Stable Diffusion AI绘画平台

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

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

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