html和js制作个人所得税表格,原创文章:使用Vuejs实现个人所得税功能兼容移动端...

使用vuejs实现个人所得税的功能，包含5000起点和3500起点之间个税的变化，并且兼容移动端。

css部分如下：

#saper-container {

width:86%;

margin:0 auto;

}

#saper-container>.header {

margin:10px 2%;

}

#saper-bd>.subfiled,#gsqd>.gswq>h3,.gssqw>h3 {

background:#66CDAA;

}

#saper-bd>.subfiled>h3 {

height:30px;

line-height:30px;

margin-left:20px;

}

#saper-bd>.subfiled-content {

width:100%;

height:140px;

}

#saper-bd>.subfiled-content>.kv-item{

margin-left:20px;

height:70px;

}

/个税5000和个税3500对比/

#gsqd {

width:100%;

}

#gsqd>.gswq {

width:50%;

float:left;

border: 1px solid #C1D3DE;

height:240px;

}

#gsqd>.gswq>h3 {

padding-left:20px;

height:30px;

line-height:30px;

}

#gsqd>.gswq>div {

margin-left:20px;

}

.gssqw {

width:49%;

float:left;

margin-left:3px;

height:240px;

border: 1px solid #C1D3DE;

}

.gssqw>.subfiled>h3 {

background:#66CDAA;

height:30px;

line-height:30px;

padding-left:20px;

}

.gssqw>.subfiled-content {

margin-left:20px;

}

.jieguo {

text-align:center;

margin-top:20px;

}

@media screen and (max-width: 480px) {

#gsqd>.gswq,#gsqd>.gssqw {

width:100%;

}

#gsqd>.gssqw {

margin-top:20px;

}

}

HTML和vuejs部分如下所示:

最新版个税计算器(起征点5000)

税前工资信息录入

税前工资：

五险一金：

个税5000计算结果

应纳税所得额：

应纳税额：

税后工资：

个税3500计算结果

应纳税所得额：

应纳税额：

税后工资：

新个税执行：每个月个税少交:{{(gongz2-gongz22).toFixed(2)}}元,一年下来可以节省{{((gongz2-gongz22)*12).toFixed(2)}}元!

具体效果请到https://www.denglu.net/Tools/grsds/观看效果！