js实现正方形颜色从下往上升的效果_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

正方形颜色

<!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>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1269

C# 教程

1248

显示更多

Related knowledge

如何在 Windows 11 上更改标题栏颜色？ Sep 14, 2023 pm 03:33 PM

默认情况下，Windows11上的标题栏颜色取决于您选择的深色/浅色主题。但是，您可以将其更改为所需的任何颜色。在本指南中，我们将讨论三种方法的分步说明，以更改它并个性化您的桌面体验，使其具有视觉吸引力。是否可以更改活动和非活动窗口的标题栏颜色？是的，您可以使用“设置”应用更改活动窗口的标题栏颜色，也可以使用注册表编辑器更改非活动窗口的标题栏颜色。若要了解这些步骤，请转到下一部分。如何在Windows11中更改标题栏的颜色？1.使用“设置”应用按+打开设置窗口。WindowsI前往“个性化”，然

如何在 Windows 11 上反转颜色 [使用快捷方式] Apr 14, 2023 pm 02:43 PM

使用 Windows 电脑时，可能需要反转电脑的颜色。这可能是由于个人偏好或显示驱动程序错误造成的。如果你想要反转 Windows 11 电脑的颜色，本文为你提供了在 Windows 电脑上反转颜色所需的所有必要步骤。在本文中反转图像上的颜色是什么意思？简单来说，反转图像的颜色意味着将图像的当前颜色翻转到色轮上的相反色调。你也可以说这意味着将图像的颜色更改为负片。例如，蓝色图像将反转为橙色，黑色变为白色，绿色变为洋红色等。如何在 Windows 11 上反转颜色？1. 使用微软画图按键，输

天然钛：揭秘iPhone 15 Pro的真实颜色 Sep 18, 2023 pm 02:13 PM

随着一年一度的Wanderlust活动的结束，苹果终于平息了长达数月的关于其iPhone15阵容的谣言和猜测。正如预期的那样，其2023年的旗舰“Pro”型号在原始动力以及新的“钛”设计和美学方面与众不同。以下是新款iPhone15Pro型号的不同颜色，并确定“天然钛”变体的真实颜色和色调。苹果手机15专业版颜色苹果选择了5级钛合金作为最新iPhone15Pro型号的材料设计。iPhone15Pro上使用的钛合金以其强度重量比而闻名，不仅使其更加耐用和轻便，而且还赋予该设备优雅的“刷子”质地，这

win10电脑护眼颜色怎么设置应用的详细教程 Jul 08, 2023 am 10:46 AM

对于办公一族来说，面对电脑办公就是一整天，多数软件背景色都是纯白，看的时间长了，眼睛就会感到干涩，难受。其实，我们可以自定义调节一下窗口护眼色，网上介绍的方法操作起来比较麻烦，本文小编和大家分享一招win10调整窗口护眼色的方法。快来看看电脑护眼模式怎么设置的方法吧。1、首先在键盘上按下组合键【win】【R】打开运行窗口输入【regedit】点击确定打开。2、然后依次展开注册表文件夹：【\HKEY_CURRENT_USER\ControlPanel\Colors】3、然后在Colors文件夹中

如何更改Windows 10任务栏的颜色 Jan 01, 2024 pm 09:05 PM

win10任务栏颜色修改起来非常简单，但是很多用户发现设置不了，其实非常的简单，只要在电脑的个性化里选择自己喜爱的颜色就可以了，要是改变不了颜色的注意详细的设置哦。win10任务栏颜色怎么改第一步：右键桌面——点击个性化第二步：颜色区域自定义第三步：选择喜欢的颜色PS：如果你无法改变颜色，可以点击颜色->选择颜色->自定义->默认windows模式，选择深色即可。

vivo全新X100系列内存、颜色曝光：全系12+256GB起步 May 06, 2024 pm 03:58 PM

5月6日消息，今天vivo官方宣布，全新的vivoX100系列将在5月13日19:00正式发布。据了解，此次发布会预计将发布vivoX100s、vivoX100sPro、vivoX100Ultra三款机型，以及vivo自研影像品牌BlueImage蓝图影像技术。数码博主“数码闲聊站”今天也放出了这三款机型的官方渲染图、内存规格及配色等，其中X100s采用了直屏设计，而X100sPro和X100Ultra则是曲屏设计。该博主透露，vivoX100s共有黑、钛、青、白四种配色，内存规格

在Java中找到一个内切于正方形的圆的面积 Aug 19, 2023 pm 04:53 PM

圆是围绕形状的二维图，没有角。每个圆都有一个原点，圆上的每个点与原点保持相等的距离。圆中原点与点之间的距离称为圆的半径。同样，如果我们从

可以在等边三角形内切的最大正方形是多大？ Sep 22, 2023 pm 06:21 PM

在这里，我们将看到能够内切于等边三角形的最大正方形的面积。三角形的边长为'a'，正方形的边长为x。三角形的边长'a'为−所以x为−例子#include<iostream>#include<cmath>usingnamespacestd;floatareaSquare(floata){//aissideoftriangle if(a<0)//ifaisnegative,thenthisisi

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题