javascript平时小例子⑤(投票效果的练习)
<!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平时小例子⑤(投票效果的练习)的更多相关文章
- javascript平时小例子⑧(导航置顶效果)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- javascript平时小例子⑨(小型抽奖功能)
<!doctype html><html lang="en"> <head> <meta charset="utf-8" ...
- javascript平时小例子⑦(鼠标跟随的div)
<!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...
- javascript平时小例子⑥(简易计算器的制作)
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- javascript平时小例子④(setInterval使用2)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- javascript平时小例子③(setInterval使用1)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- javascript平时小例子②(正则表达式验证邮箱)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮 ...
- javascript平时小例子①(移动的小div)
css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...
- JavaScript—面向对象小例子
什么是面向对象 要是以前别人问我.随口道来,封装继承多态,万物皆对象...一大推.说的自己都以为自己掌握了面向对象.呵呵一笑.确实掌握了 只是不会用..... 什么是面向对象编程 以前 学.Net 虽 ...
随机推荐
- 玲珑杯1007-A 八进制大数加法(实现逻辑陷阱与题目套路)
题目连接:http://www.ifrog.cc/acm/problem/1056 DESCRIPTION Two octal number integers a, b are given, and ...
- lr常用
一.检查点的手动添加 2.关联手工添加:
- winform里怎样在一个按钮上实现“单击”和“双击”事件?
Button按钮是没有双击事件(DoubleClick)的. button1.DoubleClick+=new EventHandler(button1_DoubleClick);使用这种方法在双击的 ...
- 标准W3C盒子模型和IE盒子模型
标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...
- idea 开发环境jdk崩溃
## A fatal error has been detected by the Java Runtime Environment:## EXCEPTION_ACCESS_VIOLATION (0x ...
- 解决js小数求和出现多位小数问题
在小数相加时,可能会产生多个小数位.如下所示: var x=1+1; //2 var x=1.20+1.11; //2.31 var x=1.56+1.76; //3.3200000000 ...
- 【Highcharts】 动态删除series
先绘制,后删除多余 var chart = new Highcharts.Chart(options); if (chart.series.length > result.dataList0.l ...
- Sprint回顾_团队听诊器
- Java 语言细节
1. if(x = 1) 为什么java不会因为这样的笔误代码犯错? // meant x == 1 因为在C++中,整数0代表布尔值false,非0值相当于布尔值true,在Java中int与布 ...
- Fault Tolerance —— Storm的故障容错性
——本文讲解了Storm故障容忍性(Fault-Tolerance)的设计细节:当Worker.节点.Nimbus或者Supervisor出现故障时是如何实现故障容忍性,以及Nimbus是否存在单点 ...