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 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
JS深入学习之数组对象排序操作示例
May 01 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制作静态网站的模板框架(三)
2006/10/09 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
iView框架问题整理小结
2018/10/16 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python生成九宫格图片
2018/11/19 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
升职自荐信范文
2013/10/05 职场文书
打架检讨书50字
2014/01/11 职场文书
就业协议书怎么填
2014/04/11 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技