Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

js achieves the effect of square color rising from bottom to top_javascript skills

WBOY
Release： 2016-05-16 16:40:17
Original
1454 people have browsed it
<!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>
Copy after login
Related labels：
square color
source：php.cn
Previous article：jQuery delete or clear an HTML element example_jquery Next article：The jQuery html() method cannot be used and the content cannot be displayed_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Sudoku checker not working? Can anyone help me identify the error? I tried everything on the online editor but still get the error. But when I do this on VSC...
From 2024-04-06 21:21:07
0
1
474
What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
From 2024-04-06 19:13:16
0
2
476
Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...
From 2024-04-06 17:46:54
0
1
355
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template