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的构造函数和constructor属性
Jan 09 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
javascript 闭包详解
Jul 02 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
Vue详细的入门笔记
May 10 Vue.js
JavaScript实现简单计时器
Jun 22 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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python-基础-入门 简介
2014/08/09 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python 列表推导式使用详解
2019/08/29 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
css3的transition属性详解
2014/12/15 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
租车协议书范本
2014/04/22 职场文书
党员一帮一活动总结
2014/07/08 职场文书
个人收入证明范本
2014/09/18 职场文书
公司委托书格式范文
2014/10/09 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
管理人员岗位职责
2015/02/14 职场文书