搜狐首页 科技 宫主大人

手机搜狐

SOHU.COM

JavaScript | 动画显示比例的投票效果

HTML5学堂(码匠):一个简洁实用的投票效果如何使用原生JS来进行实现呢?同时动画显示比例的形式又需要依靠哪些技术来实现?是数学对象还是字符串操作,又或者是计时器加上函数封装吗?

本文主要内容

1. 效果展示与结构搭建

2. 实现投票计算功能

3. 数学对象、字符串转换方法等

4. 动画显示比例条

1. 效果展示与结构搭建

1.1 效果展示

使用表单元素搭建允许用户进行数据录入的结构,配合上逻辑强大、功能丰富的原生JS,实现完整的投票计算功能,其主要功能包括:数据计算、动画展示结果、数据格式的判断等。具体展示如下:

1.2 效果结构搭建

如上图,本效果主要是做了四个选项的投票计算,在结构上就应该会出现相对应的四个input元素。但是考虑到实际使用上可能投票选项并不是刚好就只是四个的前提下,所以针对结构的搭建,使用了通过JS来动态生成相应的投票选项,具体的代码如下:

  1. var arr = ['码匠A', '码匠B', '码匠C', '码匠D'];

  2. function init(num) {

  3. for (var i = 0; i num; i++) {

  4. con.innerHTML += 'formlabel for=""' + arr[i] + ' 投票人数:/labelinput type="text" name="" id=""b数值上限500/b/formdivstrong投票占比:/strongem/emspan class="result"/span/div';

  5. };

  6. }init(4);

上述代码中,满足了选项个数的自定义设置,如果需要添加或者删除选项,只需要针对数组arr进行数组项的添加或者删除即可,这样的处理充分满足了使用者对于投票项数的管理与控制。

2. 实现投票计算功能

2.1 实现计算功能

实现投票功能的最核心在于实现计算功能,作为用户,只需要在每个input框中输入相关选项的数值即可。但是针对开发者来说,要做的就比较复杂,首先需要能够获取到用户输入的所有数值,进行求和操作,然后让每一个选项的数值除以总和得出所占百分比,最后让页面能够呈现出相应的占比值。其具体功能代码如下:

  1. var sum = 0;

  2. var vals = ;

  3. this.style.background = '#ccc';

  4. for (var i = 0; i putIns.length; i++) {

  5. vals[i] = parseInt(putIns[i].value);

  6. sum += vals[i];

  7. };

  8. for (var i = 0; i results.length; i++) {

  9. // 第四步变形 - 增加进度条

  10. var percent = vals[i] / sum * 100;

  11. prog[i].targetVal = (Math.round(percent) = 1 ? 1 : Math.round(percent));

  12. sport(prog[i], {'width' : prog[i].targetVal}, 20);

  13. results[i].innerHTML = percent.toFixed(2) + '%';

  14. };

精选