<!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. JavaScript 入门 （1）

    一. javascript的调用 JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中: <html> <hea ...

  2. 从客户端(CourseIssueContent="<P>财务审计师岗位认证招生简章<BR>...")中检测到有潜在危险的 Request.Form 值。

    说明: 请求验证过程检测到有潜在危险的客户端输入值,对请求的处理已经中止.该值可能指示危及应用程序安全的尝试,如跨站点的脚本攻击.通过在 Page 指令或 配置节中设置 validateRequest ...

  3. Spring常用工具类

    Spring框架下自带了丰富的工具类,在我们开发时可以简化很多工作: 1.Resource访问文件资源: 具体有: ResourceUtils.getFile(url); FileSystemReso ...

  4. react-基础(1)

    props 创建组件 React.createClass; 直接继承React.Component;与上面不同的是初始化props和state的方法: export class Counter ext ...

  5. this对象

    this对象   1.纯粹的函数调用 function test(){ this.x = 1; alert(this.x); } test();//1 2.函数作为某个对象的方法进行调用,这是this ...

  6. FastMM 定位内存泄露的代码位置

    FastMM 定位内存泄露的代码位置 开源的FastMM,使用很简单,在工程的第一行引用FastMM4即可(注意,一定要在第一个Uses的位置),可以在调试程序时提示内存泄露情况,还可以生成报告. 在 ...

  7. NumPy 学习（2）： 数组的操作

    1. 简单一维数组的操作 一维数组的操作类似于python自身的list类型. In [14]: arr = np.arange(10) In [15]: arr Out[15]: array([0, ...

  8. EF框架step by step(9)—Code First Fluent API

    在上一篇中,讲述了用数据特性的方式来标识实体与数据表之间的映射关系,在Code First方法中,还可以通过Fluent API的方式来处理实体与数据表之间的映射关系. 要使用Fluent API必须 ...

  9. BZOJ 1925[Sdoi2010]地精部落 题解

    题目大意: 1~n的排列中,要任意一个数要么比它左右的数都大或小,求所有的方案数. 思路: 主要思路:离散. 三个引理: ①在n->n-1的转化过程中,我们删除了一个点后,我们可以将n-1个点视 ...

  10. topcoder SRM 625 DIV2 IncrementingSequence

    由于题目数据量比较小,故可以开辟一个数组存储每个index出现的次数 然后遍历即可 string canItBeDone(int k, vector<int> A){ vector< ...