<!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. sql修改约束语法练习

    --以系统管理员身份登录到SQL Server服务器,并使用T-SQL语句实现以下操作:--1. 将stu数据库中student表的sno定义为主键:alter table [student] add ...

  2. Handler(消息机制)

    Demo演示 //通过Handler事件倒计时的一个操作,并判断状态 public class MainActivity extends AppCompatActivity {private Text ...

  3. JavaScript 入门 （1）

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

  4. SpringJMS解析1-使用示例

    Spring配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...

  5. maven junit 单元测试插件配置

    单元测试插件配置 pom.xml中增加 <dependency> <groupId>junit</groupId> <artifactId>junit& ...

  6. 泛型容器单元(Generics.Collections)[3]: TStack<T> 堆栈列表

    TQueue 和 TStack, 一个是队列列表, 一个是堆栈列表; 一个是先进先出, 一个是先进后出. TStack 主要有三个方法.一个属性:Push(压栈).Pop(出栈).Peek(查看下一个 ...

  7. 转载：Java面试笔试题大汇总

    本文来源于:http://blog.csdn.net/wulianghuan 1.面向对象的特征有哪些方面 1).抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关 ...

  8. ural 1341. Device

    1341. Device Time limit: 1.0 secondMemory limit: 64 MB Major (M): You claimed that your device would ...

  9. python程序设计语言笔记 第一部分 程序设计基础

    1.1.1中央处理器(CPU) cpu是计算机的大脑,它从内存中获取指令然后执行这些指令,CPU通常由控制单元和逻辑单元组成. 控制单元用来控制和协调除cpu之外的其他组件的动作. 算数单元用来完成数 ...

  10. hihoCoder#1384 : Genius ACM

    对于一个固定的区间$[l,r]$,显然只要将里面的数字从小到大排序后将最小的$m$个和最大的$m$个配对即可. 如果固定左端点,那么随着右端点的右移,$SPD$值单调不降,所以尽量把右端点往右移,贪心 ...