×

小游戏:给字体加上彩色背景

作者:jiang2018.07.24来源:Web前端之家浏览:774评论:0
关键词:font字体

用JS给字体加上彩色背景,一起来玩下吧!

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用JS给字体加上彩色背景</title>
    <style>
        div { width:300px; height:200px; border:1px solid #333; background:#fff; padding:20px; line-height:40px; }
        span { padding:5px 15px; font-family:微软雅黑; }
    </style>
</head>

<body>
    <div id="div1"></div>
    <input type="text"/>
    <input type="button" value="按钮"/>
</body>
<script>
    var oDiv=document.getElementById("div1");
    var oInp=document.getElementsByTagName("input")
    var arrColor=["red","blue","green","yellow"];

    oInp[0].focus()
    oInp[1].onclick=function(){
        var arr=[];
        arr=oInp[0].value
        oInp[0].value=""
        oInp[0].focus();
        console.log(arr.length)
        for(var i=0;i<arr.length;i++){
          oDiv.innerHTML+='<span style="background-color:'+ arrColor[i%arrColor.length]+'">'+arr[i]+'</span>'
        }

    }

   /* var aInput =document.getElementsByTagName("input");
    var oDiv=document.getElementById("div1");
    var arrColor=["red","blue","green","yellow"];

    aInput[1].onclick=function(){
        var val=aInput[0].value;//字符串
        var arr=val.split("");
        var str1="";
        for(var i=0;i<arr.length;i++){
            str1+="<span style='background:"+arrColor[i%arrColor.length]+"'>"+arr[i]+"</span>";
            /!*str1+=arr[i]*!/
        }
        console.log(str1);
        oDiv.innerHTML+=str1;
    }*/

</script>
</html>
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/font123124124124.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    代码不可以用...

  • asidl

    这个DEMO应该再细点更好。。。...

  • 今天头条

    文章不错非常喜欢...

  • admin

    可以交换链接~...

  • 周松松博客

    确实不会用...

  • 便宜vps

    https://www.yd631.com/(便宜vps)申请交换链接,不知可否?联系邮箱:...

  • 访客

    我是里奥梅西,现在荒的一逼!!!...

  • qlong

    mailAutoComplete插件好用。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero