<!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. Memcache升级版：CouchBase的安装配置与使用说明

    Memcache基本上已经是开发的标配了,但是对于Memcache集群,很多线上部署仍然是很单薄的. 几个存在的问题:不健壮.数据不安全.配置变更可能导致存取异常.后备数据的一致性 鉴于存在以上问题, ...

  2. Html 块级元素和行级元素

    转载:http://blog.csdn.net/yuyanqiao/article/details/8558118 内联元素(inline element)* a - 锚点* abbr - 缩写* a ...

  3. HTTP基础06--网络安全

    HTTP 的缺点 通信使用明文可能会被窃听 HTTP 报文使用明文(指未经过加密的报文)方式发送. 通信的加密 用 SSL 建立安全通信线路之后,就可以在这条线路上进行 HTTP 通信了.与 SSL ...

  4. Swift3.0语言教程查找字符集和子字符串

    Swift3.0语言教程查找字符集和子字符串 Swift3.0语言教程查找字符集和子字符串,在字符串中当字符内容很多时,我们就需要使用到查找字符集或者子字符串的方法.以下我们将讲解3种查找字符集和子字 ...

  5. 20145223《Java程序程序设计》第2周学习总结

    20145223 <Java程序设计>第2周学习总结 教材学习内容总结 一: 1.基本的类型: (1)整数:short(2字节).int(4字节).long(8字节) (2)字节 byte ...

  6. Python profiling

    Profiling(性能调试)是我一直很感兴趣的一个话题,之前给大家介绍过Datadog这个工具,今天我们来看看Python语言中有哪些方法来做Profiling. Poorman's Profile ...

  7. iOS 查找文件、遍历文件系统

    NSFileManager *manager = [NSFileManager defaultManager]; NSString *home = [@"~" stringByEx ...

  8. Python基础8- 序列

    序列是一组有顺序的元素的集合序列的成员是有序排列的且可以通过下标偏移量来访问它的一个或几个成员序列可以包含一个或多个元素,也可以没有任何元素序列有两种类型:列表(list)和元组(tuple),两者的 ...

  9. header元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 在Revit中如何显示附件模块（Add Ins） 这个命令页？zz

      分类: 概念说明 Revit Revit界面编程 Revit 二次开发入门2013-08-22 13:58 1395人阅读 评论(9) 收藏 举报 在windows 7 32-bit OS 上装了 ...