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


Posted in Javascript onAugust 04, 2014
<!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>
Javascript 相关文章推荐
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
javascript实现移动端轮播图
Dec 09 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 #Javascript
简单易用的倒计时js代码
Aug 04 #Javascript
javascript中with()方法的语法格式及使用
Aug 04 #Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 #Javascript
checkbox选中与未选中判断示例
Aug 04 #Javascript
Node.js插件的正确编写方式
Aug 03 #Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 #Javascript
You might like
php split汉字
2009/06/05 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php简单实现MVC
2015/02/05 PHP
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript实现区块链
2018/03/14 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python之信息加密题目详解
2019/06/26 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
建筑人员岗位职责
2013/12/25 职场文书
条幅标语大全
2014/06/20 职场文书
园林系毕业生求职信
2014/06/23 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
考试作弊检讨书
2014/10/21 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
高老头读书笔记
2015/06/30 职场文书
《刷子李》教学反思
2016/02/20 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
详解python字符串驻留技术
2021/05/21 Python
windows系统安装配置nginx环境
2022/06/28 Servers