<!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 虽 ...
随机推荐
-
USACO . Greedy Gift Givers
Greedy Gift Givers A group of NP (2 ≤ NP ≤ 10) uniquely named friends has decided to exchange gifts ...
-
java IO流 Zip文件操作
一.简介 压缩流操作主要的三个类 ZipOutputStream.ZipFile.ZipInputStream ,经常可以看到各种压缩文件:zip.jar.GZ格式的压缩文件 二.ZipEntry ...
-
《BI项目笔记》创建计算成员
也可以利用脚本来生成计算成员
-
【转载】解决 Subversion 的 “svn: Can&#39;t convert string from &#39;UTF-8&#39; to native encoding” 错误
转载自:http://blog.csdn.net/shaohui/article/details/3996274 在google code 上创建了一个新的项目, 用Windows 下面的tortoi ...
-
电赛菜鸟营培训（零）&mdash;&mdash;Keil环境搭建
一.Keil开发软件安装 1.安装keil软件 2.使用注册机进行破解 将方框内的ID号复制到注册机,然后得到License,放到最底下就可以完成了. 二.Keil工程搭建 表示参考数据手册,在这里建 ...
-
四则运算2+psp0级表格
四则运算2 一.题目和要求 题目:写一个能自动生成小学四则运算题目的程序,要求一次输出不少于30道,只能是整数100以内的四则运算(四则运算1升级版) 要求: 1.题目避免重复 2.可定制(数量/打印 ...
-
jquery的输入框自动补全功能+ajax
jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链 ...
-
动态dp初探
动态dp初探 动态区间最大子段和问题 给出长度为\(n\)的序列和\(m\)次操作,每次修改一个元素的值或查询区间的最大字段和(SP1714 GSS3). 设\(f[i]\)为以下标\(i\)结尾的最 ...
-
Python 入门基础18 --re模块+内存管理
今日内容: 1.垃圾回收机制 2.re模块 一.垃圾回收机制 在计算机中,不能被程序访问到的数,称之为垃圾 1.1 引用计数 引用计数用来记录值的内存地址被记录的次数 每引用一次就对标记 +1 操作 ...
-
Python3 tkinter基础 Label imag显示图片
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...