Js实现彩虹文字

lzsan_

已于 2022-03-31 15:24:20 修改

阅读量860

点赞数

文章标签： javascript

于 2022-03-31 15:23:01 首次发布

本文链接：https://blog.csdn.net/lzsan_/article/details/123873160

版权

在文本框中输入文字，点击提交按钮或按回车键+Ctrl键实现将文字添加在页面上，并采用彩虹颜色的形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
    <input type="text" name="" id="txt">
    <input type="button" value="提交" id="btn">
    <script>
        //获取元素对象
        var oDiv=document.getElementById("box");
        var oTxt=document.getElementById("txt");
        var oBtn=document.getElementById("btn");
        //设置几种颜色
        var Color=['#0000ff','#c0c0c0','#ff0000','#00ff00'];
           
        function inputMessage(){
            var str=oTxt.value;
            var newStr='';
            var index=0;
            for(var i=0,len=str.length;i<len;i++){
                //把oTxt中的字符串加到newStr中
                newStr+='<span style=background:'+Color[index++%Color.length]+'>'+str.charAt(i)+"</span>";
            }
           //把newStr加到div中
            oDiv.innerHTML+=newStr;
            //清空文本框内容
            oTxt.value=null;
        }  
         //点击提交按钮
        oBtn.onclick=function(){
          inputMessage();
        }   

        document.onkeydown=function(evt){
            var e=evt||window.event;
            //按下Enter按键和Ctrl按键
            if(e.keyCode==13&&e.ctrlKey){
                inputMessage();
            }
        }
    </script>
</body>
</html>