文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

基于JS实现一个简单的投票demo

2024-04-02 19:55

关注

演示

说明

今天没有什么好的内容分享,跟大家讲一个标签吧增长姿势。

line-height CSS 属性用于设置多行元素的空间量,如多行文本的间距。

根据浏览器的解析不同,line-height的表现方式有两种

1.基线之间的距离为line-height

2.lineHeight 为,font-size的上下加上半行距

它的取值为:

1·normal: 默认。设置合理的行间距。取决于用户端。桌面浏览器(包括Firefox)使用默认值,约为1.2,这取决于元素的

2·font-family。 number: 设置数字,此数字会与当前的字体尺寸相乘来设置行间距,即number为当前font-size的倍数。

3·length :设置固定的行间距。

4· % :基于当前字体尺寸的百分比行间距。

5· inherit: 规定应该从父元素继承 line-height属性的值。

源码

body设置

<h2>投票公布</h2>
	<div id="div1">
		<div class="a_1">50%</div>
		<div class="a_2">50%</div>
	</div>
	<!-- 红队投票 -->
	<div id="div2">
		<div >
			<img src="img/1.jpg" height="100%" width="100%" />
		</div>
		<div class="diaphane" id="result_1">
			<p>红队投票数:0</p>
		</div>
		<input type="button" name="aa" value="投红队" />
	</div>
	<!-- 蓝队投票 -->
	<div id="div3">
		<div>
			<img src="img/2.jpg" height="100%" width="100%" />
		</div>
		<div class="diaphane" id="result_2">

			<p>蓝队投票数:0</p>
		</div>
		<input type="button" name="aa" value="投蓝队" />
	</div>

js实现投票的动画

window.onload = function () {
	//获取div1及下面的div
	var oDiv = document.getElementById('div1');
	var aDiv = oDiv.getElementsByTagName('div');
	//获取点击按钮
	var aBtn = document.getElementsByTagName('input');
	//初始化百分比数字
	var lNum = 50;
	var rNum = 50;
	//计算进度条宽度
	var lNums = (rNum / (lNum + rNum)) * 520;
	var rNums = 520 - lNums;
	//设置进度条width宽度
	aDiv[1].style.width = parseInt(lNums) + 'px';
	aDiv[0].style.width = 520 - parseInt(lNums) + 'px';
	//设置进度条百分比数字
	aDiv[0].innerHTML = sub((lNum / (lNum + rNum)) * 100 + "") + "%";
	aDiv[1].innerHTML = sub((1 - lNum / (lNum + rNum)) * 100 + "") + "%";
	//初始化投票数
	var leftNum = 0;
	var rightNum = 0;
	//绑定红队投票按钮点击事件
	aBtn[0].onclick = function () {
		//每次点击累加投票数
		lNum = lNum + (++leftNum);
		//计算div对应长度
		var lNumss = parseInt(leftNum / (leftNum + rightNum) * 520);
		//设置进度条width宽度
		aDiv[0].style.width = lNumss + 'px';
		aDiv[1].style.width = (520 - lNumss) + 'px';
		//计算div百分比数字
		aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%";
		aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%";
		//设置投票数
		document.getElementById("result_1").innerHTML = "红队投票数:" + leftNum;
	}
	//绑定蓝队投票按钮点击事件
	aBtn[1].onclick = function () {
		//每次点击累加投票数
		rNum = rNum + (++rightNum);
		//计算div对应长度
		var rNumss = parseInt(rightNum / (leftNum + rightNum) * 520);
		//设置进度条width宽度
		aDiv[0].style.width = (520 - rNumss) + 'px';
		aDiv[1].style.width = rNumss + 'px';
		//计算div百分比数字
		aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%";
		aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%";
		//设置投票数
		document.getElementById("result_2").innerText = "蓝队投票数:" + rightNum;
	}
	//保留小数点后两位
	function sub(str) {
		var index = str.lastIndexOf(".");
		if (index == -1) {
			return str;
		}
		return str.substring(0, index + 3);
	}
}

css设定

* {
	margin: 0;
	padding: 0;
	list-style-type:none;
}
a,img{border:0;}

.vote{
	width:530px;
	margin:100px auto;
}

.vote h2{
	height:24px;
	line-height:24px;
	font-size:18px;
	font-weight:400;
	margin-bottom:20px;
	text-align:center;
}

#div1 {
	width: 520px;
	height: 30px;
	position: relative;
}

#div2 {
	margin:30px 20px 0 0;
	width: 250px;
	height: 325px;
	float: left;
	display:inline;
	position: relative;
}

#div3 {
	margin-top: 30px;
	margin-left: 2px;
	width: 250px;
	height: 325px;
	float: left;
}

.a_1,
.a_2 {
	position: absolute;
	top: 0;
	color:#fff;
	text-align:center;
	height:30px;
	line-height:30px;
}

.a_1 {
	left: 0;
	background:#3366cc;
}

.a_2 {
	right: 0;
	background:#ff6600;
}

.vote input {
	padding-top: 20px;
	width: 250px;
	position: absolute;
	color: #fff;
	border-radius: 1rem;
	text-decoration: none;
	padding: 1rem 2rem;
	margin-bottom: 1rem;
	min-width: 10rem;
	text-align: center;
	background-color: #6a4;
	border:0;
	cursor:pointer;
}

.diaphane {
	color: #000;
	margin:10px 0;
	text-align:center;
}

到此这篇关于基于JS实现一个简单的投票demo的文章就介绍到这了,更多相关JS投票内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯