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 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
JS+CSS实现过渡特效
Jan 02 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 超链接 抓取实现代码
2009/06/29 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python实现计算倒数的方法
2015/07/11 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
幼师自荐信
2013/10/26 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
职业规划书如何设计?
2014/01/09 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
食品安全承诺书范文
2014/08/29 职场文书
离职证明格式样本
2015/06/12 职场文书
投诉书格式范本
2015/07/02 职场文书