js实现正方形颜色从下往上升的效果

最新推荐文章于 2021-02-24 12:43:56 发布
最新推荐文章于 2021-02-24 12:43:56 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： js 文章标签： UI JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq345425170/article/details/38347941
版权
<!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" οnclick="javascript:alert(1);" >
      <div id="top">82%</div>
      <div  id="buttom"></div>
</div>
<div class="container" οnclick="javascript:alert(1);" >
      <div id="top1" >62%</div>
      <div id="buttom1"></div>
</div>
</body>
</html>

有些人有些事1990
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现上升与下降的动画效果
wu118765783的博客
09-25 850
大家好，我是pkqk今天介绍二种方法实现上升与下降。 第一个方法 应用图 html与css代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { width: 320px; height: 480px; marg..
原生JS完成页面下拉出现回到顶部操作
GothaM24的博客
12-24 547
需求： 滚动区域div的scrollHeight大于window或者可视区域的height，为了提高用户体验，在页面下拉至指定高度（such:200px）出现回到顶部操作按钮。 话不多说，直接上代码 主HTML结构： <div class="content"> <div class="container"></div> </div> JS： le...
JavaScript-正方形
weixin_44246172的博客
05-19 2013
正方形 思路：本题要实现正方形的编写，要用到两个for循环 一个是行 一个是列 行和列的宽一样才能写出正方形 //定义一个 str 字符串类型 var str = ''; //定义一个for循环 表示列 for (var a = 0; a < 10; a++) { //在定义一个for循环 表示行 for (var b = 0; b < 10;b++) { //*后面多一个空字符 给*之间一个间距 str += '* ' } //这点表示当一个循环结束，打断换行，才不会打印到一行
弹窗层从下往上效果
amyloverice的博客
04-01 3265
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,...
1：图片实现从下到上的自动移动（JS实现）
u012333006的专栏
10-05 1185
1：图片实现从下到上的自动移动 把放在图片代码之前，放在之后 解释：scrollAmount 可以自己设置值，数字越大，移动的越快；scrollDelay数值越大，时间间隔也越大； 要想实现从左到右的移动，把direction=right即可；
javascript实现输出指定行数正方形图案的方法
10-23
主要介绍了javascript实现输出指定行数正方形图案的方法,可实现javascript获取用户输入及根据输入参数打印图形的功能,需要的朋友可以参考下
js代码实现随机颜色的小方块
10-23
主要用js代码实现颜色随机的小方块,需要的朋友可以参考下
js实现方块上下左右移动效果
10-19
主要为大家详细介绍了js实现方块上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中使用echart实现三维立体图
Alisane的博客
12-21 3802
echart实现三维立体图，这个有一个踩坑点，echart在渲染数据的时候，会有过渡动画效果，当数据量大的时候，会使图表在绘制过程中卡住，解决这个问题的办法是去掉过渡动画效果：grid3D.viewControl.animation = false。 this.myChart3 = this.$echarts.init(document.getElementById('myChart3')) this.option3 = { title: { t.
js打印正方形
丹丘的博客
02-01 4977
<!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-Ty
柱状图多维条形图vue_Vue中使用Echarts实现立体柱状图（长方体）
weixin_39653442的博客
12-18 907
预览：代码：页面部分:CSS部分:.roadnum-all {width: 100%;height: 100%; /*填满父级容器*/}JS部分:import echarts from 'echarts' // 引入Echartsexport default {name: "ltzzt",data() {return {data: [],dom: null}},mo...
java 正方形边缘的颜色_js实现正方形颜色从下往上升的效果
weixin_29029169的博客
02-24 45
无标题文档$(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('mar...
使用echarts模拟立体柱形图
呱呱的博客
05-26 4453
注意：请使用echarts v4.4.0以上版本 renderItem 函数提供了两个参数： params：包含了当前数据信息（如 seriesIndex、dataIndex 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。 api：是一些开发者可调用的方法集合（如 api.value()、api.coord()）。 var MyCubeRect = echarts.graphic.extendShape({ shape: { x: 0, y: 0,
javascript 不断随机生成正方形
彭香香的专栏
03-31 2340
最终的代码：   New Document #container{ position:absolute; top:10px; left:80px; width:120px; height:300px; overflow:hidden; border:1px solid red; }
JS-for循环打印正方形，三角形，金字塔，菱形，99乘法表
HL477的博客
09-16 2595
正方形： 在控制台显示: //声明一个空的字符串来存储 var str = ' '; //外部循环 控制行数 for (var j = 0; j < 10; j++){ //内部循环 控制每行输出个数 for (var i = 0; i < 10; i++){ str = str + '* '; } str = str + '\n'; } console.log(str); ...
利用JS中的循环语句来实现正方形、长方形、平行四边形、三角形、菱形、空心菱形。
StruggleBamboo的博客
12-01 3879
利用JS来制造图形代码1.正方形2.长方形3.平行四边形4.三角形5.菱形6.空心菱形7.效果图总结 代码 1.正方形 代码如下（示例）： <script> for (var a=1;a<=10;a++){ document.write("*"); document.write("&emsp;") for (var b=1;b<10;b++){ document.write("*");
python绘制正方形，上下三角形颜色不同
最新发布
04-25
您好，可以使用Python中的Turtle模块来绘制正方形和三角形。以下是一个例子，展示如何绘制上下两个三角形。 ``` import turtle # 定义画笔 pen = turtle.Turtle() # 绘制正方形 pen.fillcolor('red') pen.begin_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值