js+css绘制颜色动态变化的圈中圈效果


Posted in Javascript onJanuary 27, 2016

本文实例讲述了js+css绘制颜色动态变化的圈中圈效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

js+css绘制颜色动态变化的圈中圈效果

具体代码如下:

<html>
<head>
 <title>circle</title>
 <style type="text/css" >
  .circle 
  { 
   border-radius:50%; 
   background:#DDDDDD; 
  }
  .circle_inside 
  { 
   width:80%; 
   height:80%;
   left:10%; 
   border-radius:50%; 
   background:#494949;
   position:relative;
   top:10%;
  }
  #circle 
  {
   margin-left:50%;
   position:relative;
   left:-250px;
   width:500px;
   height:500px;
  }
 </style>
 <script type="text/javascript" >
  var c = 'DDDDDD,DFEFFF,494949,C8DB74,46DFDE,59DDDE'.split(',');
  function create_color() {
   var color = '',
    c_length = c.length,
    random_nmb = Math.floor(Math.random()*c_length);
   return '#'+c[random_nmb];
  }
  function create_inside_circle(color, id) {
   return "<div id='"+id+"' class='circle_inside' style='background:"+color+";'></div>";
  }
  function create_all_circle() {
   var circle_nmb = 15,
    html = [],
    id = 0,
    inside_circle = document.getElementById('circle');
   for(var i=0; i<circle_nmb; i++) {
    id = "circle"+i;
    inside_circle.innerHTML = create_inside_circle(create_color(), id);
    inside_circle = document.getElementById(id);
   }
  } 
  window.onload = function(){
   setInterval(function(){
    create_all_circle();
   }, 1500);
  } 
 </script> 
</head>
<body>
 <div class="circle bg1" id="circle">
 </div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
Bootstrap树形控件使用方法详解
Jan 27 #Javascript
window.onerror()的用法与实例分析
Jan 27 #Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 #Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 #Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 #Javascript
再谈JavaScript异步编程
Jan 27 #Javascript
简单介绍jsonp 使用小结
Jan 27 #Javascript
You might like
全国中波电台频率表
2020/03/11 无线电
PHP查询分页的实现代码
2017/06/09 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
详解Python中的循环语句的用法
2015/04/09 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
详解python解压压缩包的五种方法
2019/07/05 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
Python list和str互转的实现示例
2020/11/16 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
一组SQL面试题
2016/02/15 面试题
外国语学院毕业生自荐信
2013/10/28 职场文书
打造完美自荐信
2014/01/24 职场文书
普通党员对照检查材料
2014/09/24 职场文书
单位工作证明
2014/10/07 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
试用期辞职信范文
2015/03/02 职场文书
检讨书格式
2015/05/07 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
《从现在开始》教学反思
2016/02/16 职场文书