昨天练习写了这个小demo，个人觉得通过设置定位元素left和top的值，来实现换行的功能，这种方法很巧妙~

另外，如下代码中的随机颜色的获取，还请各位前辈多多指教：需要改进的地方；或者有没有更好的方法。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             body{text-align: center;}

             li{height:50px;width:50px;background:red;position:absolute;list-style:none;text-align: center;color:white;line-height:50px;}

         </style>

         <script type="text/javascript">

             window.onload=function(){

                 var text1=document.getElementById("texta");

                 var btn1=document.getElementById("btn");

                 var ul1=document.getElementById("ul");

                 btn1.onclick=function(){

                     for(var i=0;i<parseInt(text1.value);i++){

                         var li1=document.createElement("li");

                         li1.style.left=li1.offsetLeft+i%20*64+"px";

                         li1.style.top=li1.offsetTop+parseInt(i/20)*64+64+"px";  // 实现换行

                         li1.innerHTML=i+1;

                         li1.style.background=random_load();

                         ul1.appendChild(li1);

                     }

                 }

             }

             function random_load(){

                 var R=hao(0,255).toString(16);

                 var G=hao(0,255).toString(16);

                 var B=hao(0,255).toString(16);

                 return "#"+aaa(R,G,B);

             }

             function hao(min,max){

                   return parseInt(Math.random()*(max-min+1)+min)

             }

             function aaa(r,g,b){

                   r=r.length==1?"0"+r:r;

                   g=g.length==1?"0"+g:g;

                   b=b.length==1?"0"+b:b;    //随机会获取到5位的十六进制数，不能作为颜色值，所以用这个方法解决，还请前辈多多指点  ^-^！

                   return r+g+b;

             }

         </script>

     </head>

     <body>

         <input type="text" name="texta" id="texta" value="" />

         <input type="button" name="btn" id="btn" value="生成DIV" />

         <ul id="ul">

         </ul>

     </body>

 </html>

原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~的更多相关文章

  1. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  2. 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）

    其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...

  3. 原生js写的一个当前年份日期星期和时间的显示

    话不多说,所有代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...

  4. 原生js写的一个简单slider

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  6. 原生JS写的ajax函数

    参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

  7. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  8. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  9. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

随机推荐

  1. Thread中断线程的方法

    转载:https://www.cnblogs.com/l2rf/p/5566895.html 线程对象属于一次性消耗品,一般线程执行完run方法之后,线程就正常结束了,线程结束之后就报废了,不能再次s ...

  2. python 爬虫入门案例----爬取某站上海租房图片

    前言 对于一个net开发这爬虫真真的以前没有写过.这段时间开始学习python爬虫,今天周末无聊写了一段代码爬取上海租房图片,其实很简短就是利用爬虫的第三方库Requests与BeautifulSou ...

  3. Python——第一个python程序helloworld

    安装了Python的环境之后,就是编写Python的代码了. 首先,我们来写一个简单的“hello world” 新建一个空白的txt文本,将后缀改为.py 改了后缀之后即变为Python程序的图标 ...

  4. XAMPP环境的搭建

    XAMPP是一个强大的集成软件包(什么是集成软件包?就是多个软件打包一起安装了,比如office办公软件包括了word.Excel.PPT) XAMPP包括了Apache,MySQL,PHP,Perl ...

  5. Skype坑爹报错:“旧版本无法删除，请联络您的技术支持小组 ”的解决办法

    真是恶心的让人想吐的报错.现在终于解决了,跟大家分享一下方法. 先给问题截个图,如下 首先当我去搜解决办法之前,我已经在[控制面板]的[卸载程序]里把Skype删除了,真是让我后悔不已的操作啊!!因为 ...

  6. Web前端性能优化的三个偏方

    首先牢骚几句...这一次性能优化针对的模块,初次开发阶段客户给的时间就非常少,俩月时间跳过设计一边需求分析一边编码,最后干出6000+的代码行.最终结果嘛,呵呵,除开一堆bug不说,性能就是个非常大的 ...

  7. Google Voice号码使用说明及用途

    Google Voice号码使用说明及用途 号码 已不能网页注册获取,直接向TB购买,搜Google Voice就行了.很便宜的. 一. Google Voice介绍 Google Voice首先是一 ...

  8. Java CountDownLatch解析（上）

    写在前面的话 最近一直在边工作边学习分布式的东西,看到了构建Java中间件的基础知识,里面有提到Java多线程并发的工具类,例如ReentrantLock.CyclicBarrier.CountDow ...

  9. NIO与Socket

    一.Socket 的使用 1.单线程Socket的使用 /** * 单线程版本 * 问题描述:只能服务单个客户端 * 解决方案:多线程版本 */ public class Socket_V1 { pu ...

  10. Spring入门（四）— 整合Struts和Hibernate

    一.Spring整合Struts 1. 初步整合 只要在项目里面体现spring和 strut即可,不做任何的优化. struts 环境搭建 创建action public class UserAct ...