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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
js 操作符汇总
Nov 08 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vue模块移动组件的实现示例
May 20 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
简单采集了yahoo的一些数据
2007/02/14 PHP
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
Js组件的一些写法
2010/09/10 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
javascript this详细介绍
2016/09/19 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
使用python绘制人人网好友关系图示例
2014/04/01 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
对python函数签名的方法详解
2019/01/22 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
2014年学习雷锋活动总结
2014/03/01 职场文书
学校招生宣传广告词
2014/03/19 职场文书
父亲节活动策划方案
2014/08/24 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
教师求职简历自我评价
2015/03/10 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python