<!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. c++ shared_ptr 使用注意事项. 1

    条款1:不要把一个原生指针给多个shared_ptr管理 int* ptr = new int; shared_ptr<int> p1(ptr); shared_ptr<int> ...

  2. Android 中常用的布局

    一.线性布局----LinearLayout   horizontal 水平 <?xml version="1.0" encoding="utf-8"?& ...

  3. 分享Kali Linux 2016.2第43周镜像

    分享Kali Linux 2016.2第43周镜像Kali Linux官方于10月23日如约发布了2016.2第43周镜像.和以往一样,此次镜像包含了11个镜像文件,包含PC端的32和64位镜像,还有 ...

  4. vector初始化

    对vector对象来说,直接初始化的方式适用于3种情况:1.初始值已知且数量少:2.初始值是另一个vector对象的副本:3.所有元素的初始值都一样.此外还有一种更常见的情况是4.创建一个vector ...

  5. WebApi:路由和Action选择

      译自:http://www.asp.net/web-api/overview/web-api-routing-and-actions/routing-and-action-selection   ...

  6. JavaScript eval() 函数

    定义和用法:eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法:eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 Java ...

  7. 在WPF下快速生成线的方法

    如果线较多时,在画布中用Path或Line生成时会比较慢.用DrawingVisual可以快速生成,这个在之前我的博客中已经提到.但在类库形式下生成的无法看到,保存成Image后再加入图层后成功显示. ...

  8. 来自于2016.2.23的flag

    正是中午,百废待兴,写点什么调节一会儿心情吧.正巧有许多的想法. 机房来了许多小朋友,多么像一年之前的我啊,想写题,心又纷乱,但不同的是他们比我强太多了. 停课是什么感觉?停课在机房与寒暑假.双休日在 ...

  9. 51Nod 1046 A^B Mod C Label:快速幂

    给出3个正整数A B C,求A^B Mod C.   例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整数A B C,中间用空格分隔.(1 <= A,B,C <= 10^ ...

  10. Kosaraju 算法

    Kosaraju 算法 一.算法简介 在计算科学中,Kosaraju的算法(又称为–Sharir Kosaraju算法)是一个线性时间(linear time)算法找到的有向图的强连通分量.它利用了一 ...