欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js+css繪制顏色動態(tài)變化的圈中圈效果

 更新時間:2016年01月27日 14:26:14   作者:m1870164  
這篇文章主要介紹了js+css繪制顏色動態(tài)變化的圈中圈效果,涉及JavaScript結合時間函數(shù)動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下

本文實例講述了js+css繪制顏色動態(tài)變化的圈中圈效果。分享給大家供大家參考,具體如下:

運行效果截圖如下:

具體代碼如下:

<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>

更多關于js特效相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery動畫與特效用法總結》、《jQuery常見經(jīng)典特效匯總》及《JavaScript動畫特效與技巧匯總

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • js實現(xiàn)頁面跳轉重定向的幾種方式

    js實現(xiàn)頁面跳轉重定向的幾種方式

    這篇文章主要介紹js實現(xiàn)頁面跳轉重定向的幾種方式,需要的朋友可以參考下
    2014-05-05
  • csdn 博客的css樣式 v3

    csdn 博客的css樣式 v3

    僅相隔一天就出了個v3。 修正了一個bug,firefox左側內(nèi)容寬度錯誤。
    2009-02-02
  • js實現(xiàn)iframe自動自適應高度的方法

    js實現(xiàn)iframe自動自適應高度的方法

    這篇文章主要介紹了js實現(xiàn)iframe自動自適應高度的方法,涉及javascript操作iframe框架的技巧,非常具有實用價值,需要的朋友可以參考下
    2015-02-02
  • layui 設置table 行的高度方法

    layui 設置table 行的高度方法

    今天小編就為大家分享一篇layui 設置table 行的高度方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JavaScript?數(shù)據(jù)結構之字典方法

    JavaScript?數(shù)據(jù)結構之字典方法

    這篇文章主要介紹了JavaScript?數(shù)據(jù)結構之字典方法,字典即Dictionary,是一種以?鍵-值對?形式存儲數(shù)據(jù)的數(shù)據(jù)結構,下文更多相關介紹需要的小伙伴可以參考一下
    2022-04-04
  • 利用JS實現(xiàn)簡單的日期選擇插件

    利用JS實現(xiàn)簡單的日期選擇插件

    這篇文章主要介紹了利用JS實現(xiàn)簡單的日期選擇插件,文中實現(xiàn)兩種效果的日期選擇,一種是默認參數(shù),點擊日期后直接選擇該日期,另一種是顯示按鈕來設置時間,有需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-01-01
  • JavaScript實現(xiàn)日期格式化的操作詳解

    JavaScript實現(xiàn)日期格式化的操作詳解

    在我們做業(yè)務開發(fā)的漫長歲月里,會多次跟時間打交道,相信大多數(shù)小伙伴對日期格式化也并不陌生,本文簡單記錄了JavaScript實現(xiàn)日期格式化的過程,以及一些拓展,希望對大家有所幫助
    2023-05-05
  • switchery按鈕的使用方法

    switchery按鈕的使用方法

    下面小編就為大家分享一篇switchery按鈕的使用方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • 模仿JQuery.extend函數(shù)擴展自己對象的js代碼

    模仿JQuery.extend函數(shù)擴展自己對象的js代碼

    最近打算寫個自己的js工具集合,把自己平常經(jīng)常使用的方法很好的封裝起來,其中模仿了jq的結構。
    2009-12-12
  • js批量設置樣式的三種方法不推薦使用with

    js批量設置樣式的三種方法不推薦使用with

    批量設置樣式的三種方法:第一種使用JSON/第二種使用cssText/使用第三種with(不推薦使用),感興趣的朋友可以參考下,希望可以幫助到你
    2013-02-02

最新評論