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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
详解微信小程序input标签正则初体验
2018/08/18 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python协程的用法和例子详解
2017/09/09 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
应届生财务会计求职信
2013/11/05 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
优秀护士事迹材料
2014/12/25 职场文书
客服专员岗位职责
2015/02/10 职场文书
土建施工员岗位职责
2015/04/11 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
导游词之南京中山陵
2019/11/27 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang