<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
#dakuang {
width: 1000px;
height: 30px;
}

#left,
#right {
height: 100%;
float: left;
}

#left {
background-color: red;
/*width: 335px;*/
}

#right {
background-color: cadetblue;
/* width: 165px;*/
}
</style>
</head>

<body>
<div id="dakuang">
<div id="left"></div>
<div id="right"></div>
</div>
<input type="button" value="岳钱" id="btn1" />
<input type="button" value="李强" id="btn2" />
<script>
var left, right, btn1, btn2;
var result = 500;
var r1 = 335;
window.onload = function() {
left = document.getElementById("left");
right = document.getElementById("right");
btn1 = document.getElementById("btn1");
btn2 = document.getElementById("btn2");

btn1.onclick = function() {
result++;
r1++;
suan();
}
btn2.onclick = function() {
result++;
suan();

}
suan();

function suan() {
var b1 = r1 / result;
var num1 = Math.round(b1 * 100);
left.innerHTML = "0." + num1;
right.innerHTML = "0." + (100 - num1);
var div = document.getElementById("dakuang");
// 获取大div的宽度
var width = div.offsetWidth;
// 把div左的宽度算出来
var leftWidth = width * b1;
left.style.width = leftWidth * b1 + "px";
right.style.width = (width - leftWidth) + "px";

}
}
</script>
</body>

</html>

javascript平时小例子⑤(投票效果的练习)的更多相关文章

  1. javascript平时小例子⑧(导航置顶效果)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  2. javascript平时小例子⑨(小型抽奖功能)

    <!doctype html><html lang="en"> <head> <meta charset="utf-8" ...

  3. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  4. javascript平时小例子⑥(简易计算器的制作)

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  5. javascript平时小例子④（setInterval使用2）

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  6. javascript平时小例子③（setInterval使用1）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. javascript平时小例子②（正则表达式验证邮箱）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮 ...

  8. javascript平时小例子①（移动的小div）

    css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...

  9. JavaScript—面向对象小例子

    什么是面向对象 要是以前别人问我.随口道来,封装继承多态,万物皆对象...一大推.说的自己都以为自己掌握了面向对象.呵呵一笑.确实掌握了 只是不会用..... 什么是面向对象编程 以前 学.Net 虽 ...

随机推荐

  1. （转载）RTorrent 命令行使用说明

    转自:http://blog.chinaunix.net/uid-22457844-id-2973262.html 参考:http://forum.ubuntu.org.cn/viewtopic.ph ...

  2. iOS10 UI教程禁用视图与用户的交互

    iOS10 UI教程禁用视图与用户的交互 在上文中我们提到了使用isHidden属性和alpha属性可以使视图与用户的交互被禁用,除此之外此功能还可以使用UIView的isUserInteractio ...

  3. 实现窗体随着鼠标移动(控件)--《用delphi开发共享软件》-15.1任务管理器

    private //窗体移动: OldPos,NewPos:TPoint; bMove:Boolean; procedure TForm1.FormMouseDown(Sender: TObject; ...

  4. 操作TAB文件和TStringGrid赋值；

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  5. MACD 基本用法

    基本用法 1. MACD 金叉:DIFF 由下向上突破 DEA,为买入信号. 2. MACD 死叉:DIFF 由上向下突破 DEA,为卖出信号. 3. MACD 绿转红:MACD 值由负变正,市场由空 ...

  6. Jenkins控制台中文输出乱码解决方法

    1. 设置jenkins所在服务器环境变量,右键我的电脑→属性→高级系统设置→环境变量,添加JAVA_TOOL_OPTIONS 2.修改Tomcat配置,进入apache_tomcat/conf文件夹 ...

  7. CodeForces#275--DIV 2--A

    A. Counterexample time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  8. Shell 脚本

    近期在别人的工作基础上完善了几个shell自动安装脚本. 1. 循环远程访问机器并安装 #!/bin/bash IpPrefix=. User=root Pwd= SMNIP=52.1.123.79 ...

  9. Leetcode Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  10. 转：jQuery插件开发精品教程，让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...