点击 数字随着变化html,js数字随着其他数字变化而变化?
遇到这么一个需求:
就是可打分数要随着他的打分后要变化,也就是减掉他打分的分数。
想要的结果是打分之后,可打分数减去打分的分数,当更改打分的分数后,当前可打分数复原然后再减去更改的分数。
html代码:
队长打分
当前可打分数分
js代码:
//获取队长当前可打分数
var ava_fra;
function captain_fraction(){
$.ajax({
url: serverurl,
type: "GET",
data: {
type:'10073',
actid:'100050',
tem:'4'
},
dataType:'JSON',
success: function(result) {
result=eval("("+result+")");
ava_fra = result;
$('.mark em').html(ava_fra);
get_team_info();
},
error: function(jqXHR, textStatus, errorThrown) {
alert('通讯失败,请刷新重试!');
}
});
}
var fraction=[];
//获取队员信息
function get_team_info(){
$.ajax({
url: serverurl,
type: "GET",
data: {
type:'10071',
actid:'100050',
tem:'4'
},
dataType:'JSON',
success: function(result) {
result=eval("("+result+")");
$.hideLoading();
var str = '';
for (var i = 0; i < result.length; i++) {
str += '
'
+ '
+ ''
+ '
'
+ '
+ '
'
+ '
'
+ '
'
+ '
+ '未打分'
+ '打分'
+ '
'
+ '
'
}
$('.play_info').html(str);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('通讯失败,请刷新重试!');
}
});
}
//打分
function mark(e,id){
$.prompt("", "请输入您要打的分数", function(text) {
var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if (!re.test(text)) {
$.toptips('请输入数字!');
return false;
}
$(e).siblings('.prompt').html('已打'+''+text+''+'分');
// var num = text.replace(/[^0-9]/ig,""); //在字符串中提取数字
$(e).text('更改');
var num = $(e).siblings('.prompt').find('em').text();
// 筛选出更改对象
var obj = fraction.filter(function(value) {
return value.userid === Number(id);
})[0];
// id对应的对象不存在
if (!obj) {
fraction.push({
userid: id,
mark: num
})
return
}
// 对象存在,修改分数
obj.mark = num;
}, function() {
//取消操作
});
}
请教一下这个该怎么做。。谢过哈
**打分修改后的代码:**
//打分
function mark(e,id){
$.prompt("", "请输入您要打的分数", function(text) {
var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if (!re.test(text)) {
$.toptips('请输入数字!');
return false;
}
$(e).siblings('.prompt').html('已打'+''+text+''+'分');
// var num = text.replace(/[^0-9]/ig,""); //在字符串中提取数字
$(e).text('更改');
var num = $(e).siblings('.prompt').find('em').text();
var diff = 0;
// 筛选出更改对象
var obj = fraction.filter(function(value) {
return value.userid === Number(id);
})[0];
// id对应的对象不存在
if (!obj) {
fraction.push({
userid: id,
mark: num
})
diff = num; // 计算差值
console.log("diff:"+diff);
}else{
diff = obj.mark - num; // 计算差值
console.log(diff)
// 对象存在,修改分数
obj.mark = num;
}
var $markDom = $('.mark em');
// 刷新分数
$markDom.html(Number($markDom.html()) + diff);
console.log("$markDom.html():"+$markDom.html());
}, function() {
//取消操作
});
}
但是有个问题就是修改后的分数第一次被追加到了可打分数后面,而且后面再修改也是不准确,如图:
再次修改代码后:
//打分
function mark(e,id){
$.prompt("", "请输入您要打的分数", function(text) {
var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if (!re.test(text)) {
$.toptips('请输入数字!');
return false;
}
$(e).siblings('.prompt').html('已打'+''+text+''+'分');
// var num = text.replace(/[^0-9]/ig,""); //在字符串中提取数字
$(e).text('更改');
var num = Number($(e).siblings('.prompt').find('em').text());
var diff = 0;
// 筛选出更改对象
var obj = fraction.filter(function(value) {
return value.userid === Number(id);
})[0];
// id对应的对象不存在
// if (!obj) {
// fraction.push({
// userid: id,
// mark: num
// })
// return;
// }
// obj.mark = num;
// id对应的对象不存在
if (!obj) {
fraction.push({
userid: id,
mark: num
})
diff = num; // 计算差值
} else {
// 对象存在,修改分数
obj.mark = num;
diff = obj.mark - num; // 计算差值
}
console.log("diff:"+diff)
var $markDom = $('.mark em');
// 刷新分数
$markDom.html(Number($markDom.html()) - diff);
console.log("$markDom.html:"+$markDom.html())
}, function() {
//取消操作
});
}
结果:
想要的结果是打分之后,可打分数减去打分的分数,当更改打分的分数后,当前可打分数复原然后再减去更改的分数。
再次修改代码后:
//打分
function mark(e,id){
$.prompt("", "请输入您要打的分数", function(text) {
var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if (!re.test(text)) {
$.toptips('请输入数字!');
return false;
}
$(e).siblings('.prompt').html('已打'+''+text+''+'分');
// var num = text.replace(/[^0-9]/ig,""); //在字符串中提取数字
$(e).text('更改');
var num = Number($(e).siblings('.prompt').find('em').text());
var diff = 0;
// 筛选出更改对象
var obj = fraction.filter(function(value) {
return value.userid === Number(id);
})[0];
// id对应的对象不存在
// if (!obj) {
// fraction.push({
// userid: id,
// mark: num
// })
// return;
// }
// obj.mark = num;
// id对应的对象不存在
if (!obj) {
fraction.push({
userid: id,
mark: num
})
diff = num; // 计算差值
} else {
diff = num - obj.mark; // 计算差值
// 对象存在,修改分数
obj.mark = num;
}
console.log("diff:"+diff)
var $markDom = $('.mark em');
// 刷新分数
$markDom.html(Number($markDom.html()) - diff);
console.log("$markDom.html:"+$markDom.html());
}, function() {
//取消操作
});
}
结果:
源生除了另一个问题:
当我打分输入等于或者超过12分的时候,就成这样了,当前可打分数是(总分*0.4)
结果修改:
点击 数字随着变化html,js数字随着其他数字变化而变化?相关推荐
- JS自制简易版数字华容道小游戏
最近复习了下前端基础知识HTML+JS(是真的非常基础那种,久不用,基本忘完了). 复习了一小部分内容,闲暇之余打算利用刚复习的js基础知识做个小游戏,刚好手机上下载的游戏集中就有一个数字益智游戏-- ...
- js中关于带数字类型参数传参丢失首位数字0问题
最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...
- js判断只能输入数字或小数点
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input οnkeyup="this.value=this.value.replace(/\D/g,'' ...
- Js将字符串转数字的方式
Js将字符串转数字的方式 Js字符串转换数字方方式主要有三类:转换函数.强制类型转换.弱类型隐式类型转换,利用这三类转换的方式可以有5种转换的方法. parseInt() parseInt()和Num ...
- JS中可以表示数字的最大值
目录 JS中可以表示数字的最大值 a = "abc" * "bcd"; a = Number.MIN_VALUE; var c = 123 + 456; Boo ...
- 正则匹配数字和字母php,用php与js实现正则匹配数字和字母组合的密码
这次给大家带来用php与js实现正则匹配数字和字母组合的密码,用php与js实现正则匹配数字和字母组合密码的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例讲述了正则匹配密码只能是数字和字母 ...
- js 字符串转化成数字
js 字符串转化成数字 的 三种方法主要有 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换 ...
- Js判断是否为数字,是否为空,是否为整形,是否为浮点型,是否为对象
Js判断是否为数字,是否为空,是否为整形,是否为浮点型,是否为对象 /**********************一.验证类*****************************/ //对象是否 ...
- jquery轻量级数字动画插件 —— countUp.js
CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址:https://github.com/i ...
最新文章
- Word2007怎样从随意页開始设置页码 word07页码设置毕业论文
- 数据库元数据数据字典查询_8_列出给定表的默认约束
- 本机显示服务器文本信息,打开文档显示云服务器
- 直播丨MySQL之父Monty来咯,腾讯云CDB/CynosDB技术揭秘之自主可控、前沿探索
- Python在Linux地址已在使用,python在linux下的使用
- 升级 phpstud y中的 mysql 版本
- 飞克速读软件的训练法
- matlab gui中断程序,MATLAB GUI的中斷程序
- 主流的语音芯片ic方案该如何选 这篇文章可以说清楚
- Gmail服务器拒绝发送邮件,向Gmail发送邮件被退信,其他均正常,请协助,谢谢大家...
- 【魔兽世界插件】魔兽世界插件实战笔记从入门到放弃的心理历程 第六节 窗体对象的锚定
- Learning Git Branching 题解(基础、高级、Git远程仓库)
- IBM Tivoli Storage Manager安装介绍
- Markdown实用快捷键
- Nginx配置中的if判断
- easyexcel 检查表头是否匹配_利用easyexcel生成excel文件-自定义表头与数据栏对应的处理方式...
- Command ‘pip‘ not found, but can be installed with:
- js中ES6新增的数组方法reduce(),和数组去重,降维。
- 对称、群论与魔术(九)——魔术《五边形的奇迹》
- 理解webpack中的devTool的配置项
热门文章
- iOS开发之资料收集
- Jquery监听onChange事件
- 百度android 升级,百度浏览器app下载_百度浏览器v6.4.21安卓去广告去升级版-这家软件站...
- 部署haproxy代理,搭建基于nginx的高性能反向代理群集
- 数据结构——二叉树交换左右子树位置(C语言)
- Polar vector and axial vector(极矢量和轴向矢量)
- OpenPortal认证系统 界面展示
- 计算机分辨率启动,电脑启动时分辨率都不对为什么
- CSS3新特性——新增选择器,2D/3D转换,动画
- 2012IT公司校园招聘笔试面试题