Html
    Css
    Js

    
                        
.numbers {
	counter-reset:sum;
}
#one:checked {
	counter-increment:sum 1;
}
#two:checked {
	counter-increment:sum 2;
}
#three:checked {
	counter-increment:sum 3;
}
#four:checked {
	counter-increment:sum 4;
}
#five:checked {
	counter-increment:sum 5;
}
#one-hundred:checked {
	counter-increment:sum 100;
}
.sum::after {
	content:'= ' counter(sum);
}
body {
	font-family:Verdana,sans-serif;
}
label {
	font-size:15px;
	margin:0 10px 0 0;
	display:inline-block;
}
input[type=checkbox] {
	position:absolute;
	left:-10000px;
}
input[type=checkbox] + label:before {
	content:"";
	border:1px solid #000;
	color:transparent;
	cursor:pointer;
	display:inline-block;
	font-size:15px;
	line-height:16px;
	margin:0 5px 0 0;
	height:18px;
	width:18px;
	text-align:center;
	vertical-align:middle;
	transition:color ease .4s;
}
input[type=checkbox]:checked + label:before {
	content:"\2713";
	color:#000;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css完成计算器功能

0