网页设计(十)JavaScript高级应用

在这里插入图片描述


一、劳务报酬个人所得税计算器

劳务报酬个人所得税计算器页面
在这里插入图片描述
收入少于800元免税
在这里插入图片描述收入不超过4000元时情形
在这里插入图片描述
收入超过4000元情形
在这里插入图片描述
应纳所得额超过2万小于5万情形
在这里插入图片描述
应纳所得额超过5万情形
在这里插入图片描述
劳务报酬个人所得税是指个人收入调节税的征税对象之一。劳务报酬所得是个人独立从事设计、安装、制图、医疗、会计、法律、咨询、讲学、投稿、翻译、书画、雕刻、电影、戏剧、音乐、舞蹈、杂技、曲艺、体育、技术服务等项劳务的所得。这些所得如果是以工资、薪金形式从其工作单位领取的,则属于工资、薪金所得,不属于劳务报酬所得。劳务报酬个人所得税计算公式和计算说明如下,适用税率如表所示
(1)劳务报酬个人所得税计算公式
应纳税所得额 = 劳务报酬(少于4000元)-800元。
应纳税所得额 = 劳务报酬(超过4000元)×(1-20%)。
应纳税额 = 应纳税所得额 × 适用税率 - 速算扣除数。
(2)计算说明

  • 劳务报酬所得在800元以下的,不用缴纳个人所得税。
  • 劳务报酬所得大于800元且没有超过4000元,可减除800元的扣除费用。
  • 劳务报酬所得超过4000元的,可减除劳务报酬收入20%的扣除费用。

|个人所得税预扣率表(居民个人劳务报酬所得预扣预缴适用)

级数累计预扣预缴应纳税所得额预扣率(%)速算扣除数
1不超过20,000元的部分200
2超过20,000元至50,000元的部分302000
3超过50,000元的部分407000

javascript

// incomeTax.js
// 速算扣除数 :3级,累计预扣预缴应纳税所得额不超过20000,20000~50000,超过50000。
var sskcs = new Array(0, 2000, 7000);
// 适用预扣率:3级,分别为20%、30%、40%
var ykl = new Array(0.2, 0.3, 0.4);
// jcfy:减除费用 ;ynssde:应纳税所得额;sysl:适用税率;
// sskcs:速算扣除数;yjsk:应缴税款;shsr:税后收入;
var jcfy,ynssde,sysl,sskcs,yjsk,shsr;

function $(id) {
  return document.getElementById(id);
}

function computer() {
  var sr = parseFloat($("lwbc").value);
  if (sr<800) {
    alert('收入少于800元,无需交税!');
  }else if (sr <= 4000) {
    jcfy = 800;
    ynssde = sr - jcfy;
    sysl = ykl[0];
    sskcs = 0;
    yjsk = ynssde * sysl;
    shsr = sr - yjsk;
  } else {
    jcfy = sr*0.20;
    // 设置适用税率、累计预扣预缴应纳税所得额与速算扣除数的关系
     ynssde = sr - jcfy;
    if (ynssde <= 20000) {
      sskcs = 0;
      sysl = ykl[0];
    } else if (ynssde > 20000 && ynssde <= 50000) {
      sysl = ykl[1];
      sskcs = 2000;
    } else {
      sskcs = 7000;
      sysl = ykl[2];
    }
    yjsk = ynssde * sysl-sskcs;
    shsr = sr - yjsk;
  }
  $("jcfy").innerHTML = jcfy.toFixed(2);
  $("ynssde").innerHTML = ynssde.toFixed(2);
  $("sysl").innerHTML = sysl * 100 + "%";
  $("sskcs").innerHTML = sskcs.toFixed(2);
  $("yjsk").innerHTML = yjsk.toFixed(2);
  $("shsr").innerHTML = shsr.toFixed(2);
}
<!-- prj_10_1.html  -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>劳务报酬个人所得税计算器</title>
		<style type="text/css">
			#div0 {
				width: 700px;
				height: 740px;
				margin: 0 auto;
				font-size: 18px;
				border: 8px double #009933;
				padding: 20px;
			}

			img {
				width: 60px;
				height: 60px;
			}

			input {
				height: 20px;
			}

			[type="number"] {
				width: 660px;
				height: 40px;
			}

			[type="button"] {
				width: 120px;
				height: 40px;
				background-color: #0077BB;
				color: white;
				float: right;
				margin: 10px 20px;
				border-radius: 10px;
				font-size: 22px;
			}

			.td1 {
				text-align: right;
			}
		</style>
		<script src="pro101/incomeTax.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="div0">
			<h3> <img src="pro101/image101.jpg" align="center">劳务报酬个人所得税计算器</h3>
			<h3>收入金额</h3>
			<form>
				<input type="number" id="lwbc" placeholder="请输入劳务报酬" /><br>
				<input type="button" value="计算" onclick="computer()" />
			</form>
			<table border="0" width="96%" height="180px" align="center">
				<tr>
					<td>减除费用(元)20%</td>
					<td width="200px" class="td1"><label id="jcfy"></label></td>
				</tr>
				<tr>
					<td>应纳税所得额(元)</td>
					<td class="td1"> <label id="ynssde"></label> </td>
				</tr>
				<tr>
					<td>适用税率</td>
					<td class="td1"> <label id="sysl"></label></td>
				</tr>
				<tr>
					<td>速算扣除数(元)</td>
					<td class="td1"> <label id="sskcs"></label>
				</tr>
				<tr>
					<td>应缴税款(元)</td>
					<td class="td1"> <label id="yjsk"></label> </td>
				</tr>
				<tr>
					<td>税后收入(元)</td>
					<td class="td1"><label id="shsr" value="" /></label></td>
				</tr>
			</table>
			<h3>计算公式:</h3>
			<ul>
				<li>应纳税所得额 = 劳务报酬(少于4000元) - 800元</li>
				<li>应纳税所得额 = 劳务报酬(超过4000元) × (1 - 20%)</li>
				<li>应纳税额 = 应纳税所得额 × 适用税率 - 速算扣除数</li>
			</ul>
			<h3>说明:</h3>
			<ol>
				<li>劳务报酬所得在800元以下的,不用缴纳个人所得税;</li>
				<li>劳务报酬所得大于800元且没有超过4000元,可减除800元的扣除费用;</li>
				<li>劳务报酬所得超过4000元的,可减除劳务报酬收入20%的扣除费用;</li>
			</ol>
		</div>
	</body>
</html>

二、区间内整数的阶乘累加器

计算∑N!初始页面
在这里插入图片描述

计算∑N!结果页面
在这里插入图片描述

// factorial.js
// 1.定义计算某个整数阶乘的函数
function $(id) {return document.getElementById(id)}
function factorial(n) {
  var result = 1,i = 1;
  while (i <= n) {
    result = result * i;
    i++;
  }
  return result;
}
// 2.定义计算某一区间[m,n]内整数的阶乘累加和
function factorialSum(m, n) {
  for (var i = m, sum = 0; i <= n; i++) {
    sum = sum + factorial(i);
  }
  return sum
}
//3.获取输入的区间起始整数和终止整数,并计算累加和,回填文本框中
function displaySum() {
  var m = parseInt($("m").value);
  var n = parseInt($("n").value);
  // 处理m、n的大小关系,m<=n
  var min = Math.min(m, n);
  var max = Math.max(m, n);
  // 互换位置   
  $("sum").value = factorialSum(min, max);
  $("m").value = min;
  $("n").value = max;
}
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> 计算某一区间内整数的阶乘累加和</title>
		<style type="text/css">
			fieldset {
				margin: 20px auto;
				width: 500px;
				padding: 18px 50px;
				border: 2px solid #000000;
				text-align: center;
			}

			legend {
				font-weight: bold;
			}

			* {
				font-size: 18px;
			}

			label,
			input {
				margin: 5px auto;
			}
		</style>
		<script type="text/javascript" src="pro102/factorial.js"></script>
	</head>
	<body>
		<form action="" method="post">
			<fieldset>
				<legend align="center">计算某一区间内整数的阶乘累加和</legend>
				<!-- 设置标记的id -->
				<label>区间起始整数M:</label><input type="number" id="m" value="5" /><br>
				<label>区间终止整数N:</label><input type="number" id="n" value="15" /> <br>
				<label>阶乘累加和:</label><input type="number" id="sum" value="" readonly /> <br>
				<input type="button" value="计算阶乘累加和" onclick="displaySum()" />
				<input type="reset" value="清空" />
			</fieldset>
		</form>
	</body>
</html>

三、统计英文字符出现的频次

英文字母出现频次统计页面
在这里插入图片描述

<!-- prj_10_3.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>统计英文字母出现的频次</title>
		<style type="text/css">
			#div0 {
				margin: 0 auto;
				padding: 0px 20px;
				width: 460px;
				height: 300px;
				border: 1px solid #8899AA;
				text-align: center;
			}

			[type="text"] {
				width: 350px;
				height: 20px;
			}

			input {
				margin: 5px;
			}
		</style>
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id)
			}

			function sumChars() {
				var ss = $("strings").value.toLowerCase();
				var chars = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s",
					"t", "u", "v", "w", "x", "y", "z");
				var charSum = new Array(26);
				for (var i = 0; i < charSum.length; i++) {
					charSum[i] = 0;
				}
				var char = "";
				for (var i = 0; i < ss.length; i++) {
					if (chars.indexOf(ss.charAt(i)) != -1) {
						charSum[chars.indexOf(ss.charAt(i))]++;
					}
				}
				var resultString = "";
				for (var i = 0; i < charSum.length; i++) {
					if (charSum[i] != 0) {
						resultString += chars[i] + ":" + charSum[i] + "  ";
					}
				}
				$("result").value = resultString;
			}
		</script>
	</head>
	<body>
		<div id="div0">
			<h3>统计英文字母出现的频次</h3>
			<form action="" method="post">
				<label>输入字符串:</label>
				<input type="text" id="strings" value="This is an example." placeholder="输入字符串" /><br>
				<input type="button" value="统计字母出现的频次" onclick="sumChars()" />
				<input type="reset" name="" id="" value="清空" />
				<h4>英文字母出现的频次统计结果</h4>
				<textarea id="result" rows="4" cols="40" readonly></textarea>
			</form>
		</div>
	</body>
</html>

四、课外拓展训练

1.找出符合条件的数

在这里插入图片描述

<!-- project_10_1.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>找出符合条件的数</title>
	</head>
	<body>
		<h3>找出100-2000之间能够被11和13同时整除的整数的个数及累加和</h3>
		<script type="text/javascript">
			document.write("区间中符合条件的数有(输出格式:10个1行):<br>");
			var count = 0; //定义符合条件的数的计数器,兼做分行变量
			for (var sum = 0, i = 100; i <= 2000; i++) {
				if (i % 11 == 0 && i % 13 == 0) {
					document.write(i + "  ");
					count++;
					if (count % 10 == 0) {
						document.write("<br>");
					}
					sum = sum + i;
				}
			}
			document.write("<br>区间中符合条件的数共有" + count + "个");
			document.write("<br>区间中符合条件的数的累加和为" + sum);
		</script>
	</body>
</html>

2.倒置九九乘法口诀表

在这里插入图片描述

<!-- project_10_2.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>倒置九九乘法口诀表</title>
		<style type="text/css">
			label {
				background-color: #F1F2F3;
			}
		</style>
	</head>
	<body>
		<h3>倒置九九乘法口诀表(偶数行添加背景)</h3>
		<script type="text/javascript">
			var cj = 0;
			for (i = 9; i >= 1; i--) {
				var exp = "";
				for (j = 1; j <= i; j++) {
					cj = i * j;
					exp = exp + j + "*" + i + "=" + cj + "&nbsp;"
				}
				if (i % 2 == 0) {
					document.write("<label>" + exp + "</label>");
				} else {
					document.write(exp);
				}
				document.write("<br>");
			}
		</script>
	</body>
</html>

作者主页: 正函数的个人主页
文章收录专栏: Web design
在这里插入图片描述

在这里插入图片描述

欢迎大家点赞 👍 收藏 ⭐ 加关注哦!
如果你认为这篇文章对你有帮助,请给正函数点个赞吧,如果发现什么问题,欢迎评论区留言!!

  • 22
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

.正函数.

你的鼓励是我创作制作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值