<!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. Linux使用jstat命令查看jvm的GC情况

    Linux使用jstat命令查看jvm的GC情况 http://www.open-open.com/lib/view/open1390916852007.html http://www.aiuxian ...

  2. ROC曲线绘制

    ROC 曲线绘制 个人的浅显理解:1.ROC曲线必须是针对连续值输入的,通过选定不同的阈值而得到光滑而且连续的ROC曲线,故通常应用于Saliency算法评价中,因为可以选定0~255中任意的值进行阈 ...

  3. Portlet简述

    一.Portlet是什么? Portlet是基于java的web组件,由portlet容器管理,并由容器处理请求,生产动态内容.Portals使用portlets作为可插拔用户接口组件,提供信息系统的 ...

  4. C#开发微信公众平台-就这么简单（附Demo）（转）

    原文:http://www.cnblogs.com/xishuai/p/3625859.html 写在前面 阅读目录: 服务号和订阅号 URL配置 创建菜单 查询.删除菜单 接受消息 发送消息(图文. ...

  5. js倒计时（可定义截止日期）

    <div id="times_wrap" class="time_num"> 距离结束时间: <div class="time_w& ...

  6. 使用Gson排除特定字段

    http://blog.csdn.net/hknock/article/details/51037564

  7. three.js加入监控

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. ubuntu server下建立分区表/分区/格式化/自动挂载（转）

    link:http://www.thxopen.com/linux/2014/03/30/Linux_parted.html 流程为:新建分区-->格式化分区-->挂载分区 首先弄明白分区 ...

  9. 移动开发流量省起来之Zepto

    一张图说明Zepto.js的优势:   jquery 1.x最新版284KB,压缩后94KB:jquery2.x最新版247KB,压缩后84KB:Zepto最新版54KB,压缩后9KB!!!   然后 ...

  10. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...