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 相关文章推荐
JavaScript 事件系统
Jul 22 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
详解javascript函数写法大全
Mar 25 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
8个必备的PHP功能开发
2015/10/02 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP实现微信提现功能
2018/09/30 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
完善的jquery处理机制
2016/02/21 Javascript
一分钟理解js闭包
2016/05/04 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
jQuery列表检索功能实现代码
2017/07/17 jQuery
js实现点击按钮复制文本功能
2020/07/20 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
深入解析Python中的WSGI接口
2015/05/11 Python
django实现分页的方法
2015/05/26 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python3 读取Word文件方式
2020/02/13 Python
如何在django中实现分页功能
2020/04/22 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
利用python绘制正态分布曲线
2021/01/04 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
某公司部分笔试题
2013/11/05 面试题
保险公司晨会主持词
2014/03/22 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
报名委托书
2015/01/29 职场文书