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据option的value值快速设定初始的selected选项
Aug 13 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vue的常用组件操作方法应用分析
Apr 13 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
php通过session防url攻击方法
2014/12/10 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python 数据结构之旋转链表
2017/02/25 Python
python2 与python3的print区别小结
2018/01/16 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
python实现串口自动触发工作的示例
2019/07/02 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
自荐信的格式
2014/03/10 职场文书
高中同学会活动方案
2014/08/14 职场文书
八年级数学教学反思
2016/02/17 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL