点击生成10个随机颜色的li
来源:互联网 发布:凡科建站域名绑定 编辑:程序博客网 时间:2024/05/16 10:45
点击生成10个随机颜色的li
html以及css部分:
<style> body,ul{ margin:0; padding:0; } li{ display:inline-block; list-style: none; text-align:center; margin-left:5px; margin-bottom:5px; width: 50px; height: 50px; border:1px #000 solid; background:red; line-height:50px; font-size:25px; } </style><input class="btn" type="button" value="点击生成10个li"/><ul class="list"></ul>
点击按钮,将生成的10个带有随机颜色的li标签插入到ul标签中
<script> window.onload=function(){ var btn=document.getElementsByClassName("btn")[0]; var list=document.getElementsByClassName("list")[0]; var colors=["blue","purple","pink","yellow","green","red"]; function selectFrom(min,max){ var num =max-min+1; return Math.floor(Math.random()*num+min); } //生成随机颜色 btn.onclick=function(){ for(var i=0;i<10;i++){ var Ele=document.createElement("li");// Ele.innerHTML=i+1;也可以达到添加数字的效果 var txt=document.createTextNode(i+1);// Ele.childNodes[0].nodeValue=txt;因为创建的li没有内容,所以它并没有文本节点,直接更改不会成功 Ele.appendChild(txt); Ele.style.backgroundColor=colors[selectFrom(0,colors.length-1)]; list.appendChild(Ele); } }; };</script>
0 0
- 点击生成10个随机颜色的li
- 随机颜色的生成
- 随机颜色的生成
- 自动生成10个Li
- 随机颜色的生成函数
- 随机背景颜色的生成
- 随机生成10个不同的数
- //li加个点击事件
- echarts+ajax+json动态生成多个不同随机颜色的柱状图
- 点击第0个<li></li>弹出0,点击第一个<li></li>弹出1
- php生成随机颜色的方法
- jQuery中判断当前点击的是第几个li
- 动态生成 ul 的li jquery 点击事件无法获取到li
- 随机生成10个整数
- 随机生成10个整数
- 通过内容相同去找点击的li对象是页面中的第几个li元素
- ul li 中判断当前点击的li是哪儿个
- jQuery点击li标签改变颜色,其他li标签不变
- 摘要(Hash)算法总结
- Maven安装配置Repository及关联Eclipse
- android问题之--VT-x is disable in bios
- 今天星期几?
- (三)栈和队列
- 点击生成10个随机颜色的li
- smmu 学习笔记之iova_domain中的一个变量granule
- 代码可读性提升指南
- 斯坦福机器学习教程学习笔记之3
- 中文自然语言处理工具介绍
- 数据结构——栈
- OCILIB使用经验
- crontab 简单梳理
- Java 注解原理