社区文档构建进行中，欢迎编辑。社区答疑群（非官方）：717421103

全站通知：

用户:4494421/通用计算器/doc

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

通用计算器
引用：MediaWiki:ComCalc.js、MediaWiki:ComCalc.css
版本：1.0.0
最后更新日期：2023.10.01
作者：丩卩夂忄

简介

这是一个可以满足大部分允许用户输入参数并输出计算结果的需求的计算器，比如根据等级变动的等级战力计算器，活动点数计算器等

构造

基础

HTML部分

说明 
<div class="comCalc" data-name="${计算器名}" data-func="${函数名}" data-param="${参数名1,参数名2,……}">
	<div class="ccInput" data-type="${类型}" data-name="${参数名（和上面的参数名要对应）}" data-value="${默认值}" ${其他配置，根据类型而不同}>
		<var></var>
	</div>
	<div class="ccInput" data-type="${类型}" data-name="${参数名（和上面的参数名要对应）}" data-value="${默认值}" ${其他配置，根据类型而不同}>
		<var></var>
	</div>
	<div class="ccResult"></div>
</div>
实例 
<div class="comCalc" data-name="shili1" data-func="comCalcFunc.sum" data-param="a,b">
	<div class="ccInput" data-type="number" data-name="a" data-value="0" data-min="0" data-max="100" data-step="1">
		<var></var>
	</div>+<div class="ccInput" data-type="range" data-name="b" data-value="0" data-min="0" data-max="100" data-step="1">
		<var></var><span class="echo editable"></span>
	</div>=<span class="ccResult"></span>
</div>
效果
+
=
.comCalc：计算器的根容器，每一个.comCalc都会被识别为一个计算器，计算器之间相互独立
data-name：计算器名，随意起即可，但同一页面的多个计算器不可重复起同一个名字
data-func：函数名，指示该计算器使用的函数，详见JS部分
data-param：上述函数需要的参数，参数名使用逗号分隔
特别的，如果计算器找不到参数名对应的.ccInput，则会将参数名视为一个常数，原样传入计算器
.ccInput：输入框，每一个.ccInput都会被识别为一个用户输入
data-type：输入框类型，理论上所有<input>标签支持的类型都行，但本计算器对下列类型做过特别支持
="text"：普通输入框
="number"：数值输入框
="range"：滑块型
="radio"：单选型
="checkbox"：多选型
="const"：特别的，支持定义一个不可编辑的常数这也算用户输入？
="select"：特别的，支持下拉型
data-name：该输入框对应的参数名，与.comCalc的data-param的参数名相对应
data-value：默认值，如果有多个默认值（仅当data-type为checkbox时）用逗号分隔
其他配置：根据data-type的不同而不同，此处进行枚举
text、radio、checkbox
无
number、radio：
data-min：最小值
data-max：最大值
data-step：步进长度
const:
data-display：该常数显示的值，可留空（将与data-value相同）。注意：只有无该字段才与data-value相同，只要存在该字段，就会显示为该字段的值，即便它是一个空字符串
select：
data-option：选项，用逗号分隔
data-display：选项显示，用逗号分隔，可留空（将与data-option相同）
var：用var标签指示输入框的实际定位点。因为wiki不支持input标签才会这么写的，我猜大家完全用不着var标签。如果是单选型和多选型，可以在.ccInput中枚举多个var（其实就是枚举多个选框），并且支持下列额外配置
data-value：该选框的值
data-display：该选框的显示文本，可留空（将与data-value相同）。注意：只有无该字段才与data-value相同，只要存在该字段，就会显示为该字段的值，即便它是一个空字符串
.echo：为.ccInput回显值，一般给滑块型用
.editable：将回显变成可编辑的。注意：对单选型和多选型无效。除了滑块型真的有回显的必要吗！
.ccResult：结果显示

JS部分

在JS中，只需要关注.comCalc的data-func指向的函数是如何找到的就好了：这必须是一个window对象可达的函数
  • 直接调用JS内置函数：大概没人会这么用的
例如：data-func="Math.cos"
  • 定义一个函数，然后调用，形式包括但不限于：
直接定义：
function add(a, b) {
	return a + b
}
调用：data-func="add"
赋值式定义：
add = function (a, b) {
	return a + b
}
调用：data-func="add"
在对象中定义：
comCalcFunc = {
	add: function (a, b) {
		return a + b
	}
}
调用：data-func="comCalcFunc.add"
用构造函数定义：
class ComCalc {
	add(a, b) {
		return a + b
	}
}

CC = new ComCalc()
调用：data-func="CC.add"
该函数接收的参数即为data-param描述的值

高级

看到这里能看懂的应该也是不需要示例代码就能看懂了的于是本段就不用实例代码手把手教了啊

HTML部分

.comCalc：和基础部分一样
.ccGroup：配置和基础部分的.ccInput完全一致。以data-name进行编组，计算器会将.ccGroup下级的.ccInput放进一个数组，整体传给函数
.ccInput：和基础部分的.ccInput类似，但所有配置均可以留空，如果留空就会读取上级编组的信息（其实就是批量配置）
.ccInput：和基础部分一样
.ccResult：和基础部分一样。如果需要输出多结果，本计算器也支持显示：
data-name：返回的对象的名字，详见JS部分

JS部分

函数返回值不但可以是一个单一值，也可以是对象
function sizeyunsuan(a, b) {
	return {
		jia: a + b,
		jian: a - b,
		cheng: a * b,
		chu: a / b
	}
}
计算器会找data-name为“jia”、“jian”、“cheng”、“chu”的ccResult分别填入对应的值
返回结果可以是数组，此时ccResult的data-name可以省略，计算器会按照页面渲染顺序依次填入数组值；也可以手动为data-name写数组下标，来当普通对象用
function sizeyunsuan(a, b) {
	return [
		a + b,
		a - b,
		a * b,
		a / b
	]
}

样例

本样例使用的函数放置在了MediaWiki:ComCalc.js/function.js
大家应该都会使用编辑源代码来看代码的吧

1

攻击力 护甲 血量 伤害

2

总价
项目 单价 个数 总价
初月
试作型203mm/55三连装主炮T0
外观装备箱(常世夜游)
总价
取自“https://wiki.biligame.com/tools/index.php?title=用户:4494421/通用计算器/doc&oldid=43428”