<!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. MVC3实现多个按钮提交

    有时我们需要在同一个Form表单中进行多个按钮的提交,来完成不同的功能.因为MVC中一个表单默认只能提交到一个Action处理,相对比较麻烦. 1.使用客户端脚本 我们可以view中加上如下代码: & ...

  2. CSS3 calc()的使用

    前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...

  3. loopback 03

    使用微信开发前准备 微信公众开发者平台 注册开发者账号获取权限: 安装包: wechat, wechat-oauth 微信公众平台操作 登录之后,得到appID和appsecret 根据appID和a ...

  4. Linux中cp覆盖不提示

    cp覆盖时,无论加什么参数-f之类的还是提示是否覆盖,这在大量cp覆盖操作的时候是不能忍受的. 1. 把a目录下的文件复制到b目录 cp –r a/* b 2. 执行上面的命令时,b存在的每个文件都会 ...

  5. oracle过程中动态语句实现

    oracle过程中动态语句实现 一般的PL/SQL程序设计中,在DML和事务控制的语句中可以直接使用SQL,但是DDL语句及系统控制语句却不能在PL/SQL中直接使用,要想实现在PL/SQL中使用DD ...

  6. Hash(LCP) || 后缀数组 LA 4513 Stammering Aliens

    题目传送门 题意:训练指南P225 分析:二分寻找长度,用hash值来比较长度为L的字串是否相等. #include <bits/stdc++.h> using namespace std ...

  7. KMP(fail数组应用) LA 3026 Period

    题目传送门 题意:(训练指南P213) 求每个前缀的最短循环节 分析:利用失配函数的性质,如果i % (i - fail[i]) == 0,那么正好错位移动一个循环节长度. #include < ...

  8. 余数 2015广工校赛 C 魔幻任务

    题目传送门 题意:问n位最小能整除47的数字 分析:打表发现前面都是100000...,后两位就是100000%47后到47的距离,就是快速幂求1000000%47的值,47-它就是后两位 #incl ...

  9. Python int与string 的转换

    string → int 1.10进制的string转化为int int('12')  → type(int('12')) 进行验证 2.16进制的string转化为int int('12', 16) ...

  10. Windows CMD命令大全

    http://greatverve.cnblogs.com/archive/2011/12/09/windows-cmd.html 命令简介 cmd是command的缩写.即命令行 . 虽然随着计算机 ...