javascript array拆分(合并)与简单应用(文字背景)demo

最新推荐文章于 2018-08-06 20:48:49 发布

戴宇琪

最新推荐文章于 2018-08-06 20:48:49 发布

阅读量266

点赞数

分类专栏： WEB前端开发

本文链接：https://blog.csdn.net/yuqidai/article/details/51612169

版权

WEB前端开发专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>array拆分(合并)与简单应用(文字背景)demo</title>
<script>
window.onload = function(){
    var oDiv1 = document.getElementById('div1');
    var oInp = document.getElementsByTagName('input');
    var arr = '';
    var arrColor = ['#CCC','#BBB','#EEE','#DDD']
    
    //array合并
    //alert(arrColor.join('-'));
    
    //alert(1);
    
    oInp[1].onclick = function(){
        oDiv1.innerHTML='';
        arr = oInp[0].value.split('');
        for(var i=0;i<arr.length; i++){
            oDiv1.innerHTML += '<div style="background-color:'+ arrColor[i%arrColor.length] +'">'+arr[i]+ '</div>';
            }
        }
    
    }
</script>
<style>
div { width:100px; height:100px; float:left; margin-left:10px;}
</style>
</head>
<body>
<span id="div1"></span>
<input type="text" />
<input type="button" value="上传" />
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

戴宇琪

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript array拆分(合并)与简单应用(文字背景)demo

array拆分(合并)与简单应用(文字背景)demowindow.onload = function(){ var oDiv1 = document.getElementById('div1'); var oInp = document.getElementsByTagName('input'); var arr = ''; var arrColor = ['#
复制链接

扫一扫