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的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
javascript时区函数介绍
Sep 14 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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
PHP新手上路(十一)
2006/10/09 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
js中的string.format函数代码
2020/08/11 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
js读写json文件实例代码
2014/10/21 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
python破解zip加密文件的方法
2018/05/31 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Django分组聚合查询实例分享
2020/04/29 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
计算机应用专业推荐信
2013/11/13 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
高中教师考核方案
2014/05/18 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
学习保证书
2015/01/17 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL