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 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
vue 虚拟DOM的原理
Oct 03 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编程每天必学之验证码
2016/03/03 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
Python 的 with 语句详解
2014/06/13 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python selenium firefox使用详解
2019/02/26 Python
python实现动态数组的示例代码
2019/07/15 Python
Django ORM filter() 的运用详解
2020/05/14 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
生态学毕业生自荐信
2013/10/27 职场文书
趣味体育活动方案
2014/02/08 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
大学生见习报告范文
2014/11/03 职场文书
慰问信格式规范
2015/03/23 职场文书
材料员岗位职责范本
2015/04/11 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书