js实现正方形颜色从下往上升的效果_JavaScript

js实现正方形颜色从下往上升的效果

2021-02-03 16:31whsnow JavaScript

大家有没有看到类似颜色从下往上升的效果，在本例将与大家介绍下此效果的具体实现

				?

									<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

									<html xmlns="http://www.w3.org/1999/xhtml">

									<head>

									<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

									<title>无标题文档</title>

									</head>

									<script src="jquery-1.8.2.js" type="text/javascript"></script>

									<script type="text/javascript">

									 $(function(){

									  interid=setInterval(Showgao,1);

									  var i=1;

									  $('#top').height(8);

									  $('#buttom').css('marginTop',42);

									  $('#buttom').css('background','#d6d6d6');

									  function Showgao()

									  {

									    var oldH=$('#buttom').css('marginTop');

									    var h= oldH.substr(0,oldH.indexOf('px'));

									    $('#buttom').css('marginTop',h-1);

									    $('#buttom').height(i);

									    i++;

									    if(i==42){clearInterval(interid);}

									  }

									  interid1=setInterval(Showgao1,1);

									  var i1=1;

									  $('#top1').height(4);

									  $('#buttom1').css('marginTop',46);

									  $('#buttom1').css('background','red');

									  function Showgao1()

									  {

									    var oldH=$('#buttom1').css('marginTop');

									    var h= oldH.substr(0,oldH.indexOf('px'));

									    $('#buttom1').css('marginTop',h-1);

									    $('#buttom1').height(i1);

									    i1++;

									    if(i1==30){clearInterval(interid1);}

									  }

									});

									</script>

									<body>

									<style>

									  .container{width:20px;height:50px;border:1px solid #999;font-size:10px;float:left;margin-left:5px;}

									</style>

									<div class="container" onclick="javascript:alert(1);" >

									   <div id="top">82%</div>

									   <div id="buttom"></div>

									</div>

									<div class="container" onclick="javascript:alert(1);" >

									   <div id="top1" >62%</div>

									   <div id="buttom1"></div>

									</div>

									</body>

									</html>