JavaScript编程入门

最新推荐文章于 2020-10-08 21:58:59 发布

勇敢的兵

最新推荐文章于 2020-10-08 21:58:59 发布

阅读量875

点赞数

分类专栏： 05软件开发文章标签： javascript

本文链接：https://blog.csdn.net/qq_37251897/article/details/100181220

版权

05软件开发专栏收录该内容

32 篇文章 0 订阅

订阅专栏

文章目录

知识点

1）使用浏览器请求网页的时候，浏览器会去后台服务器上下载网页的HTML文档
2）HTML文档里面可以通过script标签引入外部的JS文件，JS文件的访问路径可以通过src属性设置
3）浏览器根据这些JS文件的访问路径到指定的远程服务器上进行下载
4）当Web事件（比如点击事件，鼠标事件，表单提交等）发生时，浏览器就会执行本地JS文件里面的相关代码
5）有技术背景的用户可以修改本地的JS代码，完成非法数据的提交

薪资计算

假设员工税前工资10000元，扣除社保300元。
适用5000元新的费用标准和新的税率表
1）应纳所得额=10000-300-5000=4700元
2）应纳个人所得税额：4700*0.1-210=260元

全月应纳税所得额	税率	速算扣除数(元)
不超过3000元	3%	0
超过3000元至12000元	10%	210
超过12000元至25000元	20%	1410
超过25000元至35000元	25%	2660
超过35000元至55000元	30%	4410
超过55000元至80000元	35%	7160
超过80000元	45%	15160

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>上海市五险一金及税后工资计算器</h1>
<table border="0" width="70%">
<tr>
<th>税前：</th>
<td>
<input type="text" id="salary" value="0.0" />
<input type="button" value="计算" onclick="showSalary();" />
</td>
</tr>
<tr>
<th>社保汇缴基数：</th><td><input type="text" id="benifit" value="4279.0" /></td>
</tr>
<tr>
<th>公积金基数：</th><td><input type="text" id="benifit2" value="2300.0" /></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="70%">
<tr>
<th>养老保险金（个人）：</th><td id="td01">0.0</td>
<th>养老保险金（公司）：</th><td id="td02">0.0</td>
</tr>
<tr>
<th>医疗保险金（个人）：</th><td id="td03">0.0</td>
<th>医疗保险金（公司）：</th><td id="td04">0.0</td>              
</tr>
<tr>
<th>失业保险金（个人）：</th><td id="td05">0.0</td>
<th>失业保险金（公司）：</th><td id="td06">0.0</td>              
</tr>   
<tr>
<th>基本住房公积金（个人）：</th><td id="td07">0.0</td>
<th>基本住房公积金（公司）：</th><td id="td08">0.0</td>              
</tr>
<tr>
<th>&nbsp;</th><td>&nbsp;</td>
<th>工伤保险金（公司）：</th><td id="td09">0.0</td>              
</tr>
<tr>
<th>&nbsp;</th><td>&nbsp;</td>
<th>生育保险金（公司）：</th><td id="td10">0.0</td>              
</tr>
<tr>
<th>扣除四金后月薪：</th><td id="td11">0.0</td><th>&nbsp;</th><td>&nbsp;</td>             
</tr>   
<tr>
<th>个人所得税：</th><td id="td12">0.0</td>
<th>&nbsp;</th><td>&nbsp;</td>             
</tr>
<tr>
<th>税后月薪：</th><td id="td13">0.0</td>
<th>&nbsp;</th><td>&nbsp;</td>             
</tr>                                                                           
</table>
</body>
</html>

JS代码

function showSalary(){
    var salary = document.getElementById("salary").value.trim();//获取税前薪资
    var base = document.getElementById("benifit").value.trim();//获取社保基数
    //var base = parseFloat(document.getElementById("benifit").value).trim();//获取社保基数
    var base2 = document.getElementById("benifit2").value.trim();//获取公积金基数
 if(salary==""||salary==undefined||base==""||base==undefined||base2==""||base2==undefined){
  alert("金额不能为空");
  return; //结束函数的执行
 }
    if(isNaN(salary)||isNaN(base)||isNaN(base2)){
        alert("输入的金额必须是数值");
        return; //结束函数的执行
    }
    var yanglaoSelf = base*0.08;//计算个人缴纳的养老金
    var yanglaoCompany = base*0.2;//计算公司缴纳的养老金
    var yiliaoSelf = base*0.02;//计算个人缴纳的医疗保险
    var yiliaoCompany = base*0.095;//计算公司缴纳的医疗保险
    var shiyeSelf = base*0.005;//计算个人缴纳的失业保险
    var shiyeCompany = base*0.005;//计算公司缴纳的失业保险
    var gongjijinSelf = base2*0.07;//计算个人缴纳的公积金
    var gongjijinCompany = base2*0.07;//计算公司缴纳的公积金  
    var gongshangCompany = base*0.002;//计算公司缴纳的工伤保险金
    var shengyuCompany = base*0.01;//计算公司缴纳的生育保险金   
    var salary2 = salary - yanglaoSelf - yiliaoSelf - shiyeSelf - gongjijinSelf;    
    var yingna = salary2 - 5000;//应纳税所得额
    var tax = 0.0;
 if(yingna<=0){
  tax = 0.0;
 }else if(yingna<=3000){
        tax = yingna*0.03;
    }else if(yingna<=12000){
        tax = yingna*0.1 - 210;
    }else if(yingna<=25000){
        tax = yingna*0.2 - 1410;
    }else if(yingna<=35000){
        tax = yingna*0.25 - 2660;
    }else if(yingna<=55000){
        tax = yingna*0.3 - 4410;
    }else if(yingna<=80000){
        tax = yingna*0.35 - 7160;
    }else{
        tax = yingna*0.45 - 15160;
    }
    document.getElementById("td01").innerText = yanglaoSelf.toFixed(2);//
    document.getElementById("td02").innerText = yanglaoCompany.toFixed(2);//
    document.getElementById("td03").innerText = yiliaoSelf.toFixed(2);//
    document.getElementById("td04").innerText = yiliaoCompany.toFixed(2);//    
    document.getElementById("td05").innerText = shiyeSelf.toFixed(2);//
    document.getElementById("td06").innerText = shiyeCompany.toFixed(2);//
    document.getElementById("td07").innerText = gongjijinSelf.toFixed(2);//
    document.getElementById("td08").innerText = gongjijinCompany.toFixed(2);//
    document.getElementById("td09").innerText = gongshangCompany.toFixed(2);//
    document.getElementById("td10").innerText = shengyuCompany.toFixed(2);//
    document.getElementById("td11").innerText = salary2.toFixed(2);//
    document.getElementById("td12").innerText = tax.toFixed(2);
    document.getElementById("td13").innerText = (salary2 - tax).toFixed(2);
}

淡入淡出

HTML代码和CSS代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css"> 
.green{
    position: relative;
    border-radius: 5px;
    left: 30%;
    width: 30%;
    height: 150px;
    background-color: green;
    vertical-align: middle;
}
.hide{
    display: none;
}
h2{
    text-align: center;
    line-height: 150px;
    color: white;
}
</style>
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="begin();">
<div>
<h1>这是一个标题</h1>
<input type="button" id="btn" value="点击我" onclick="meet();"/>
</div>
<div class="green hide animated" id="div01">
<h2>晚上8点，老地方见！</h2>
</div>
</body>
</html>

JS代码

function meet(){
 var yesOrNo = confirm("确定要见面吗?");//
 if(yesOrNo == true){
  showDiv();
 }
}
var isFadeOut = false;//是否淡出
var div = undefined;
function begin(){ //加载页面的时候会执行该函数
 div = document.getElementById("div01");//找到提示框
 div.addEventListener("animationend",function(){//动画结束时,调用匿名函数
     if(isFadeOut==true){
         div.classList.add("hide");//给class属性值列表添加hide这个值(提示框就会被隐藏)
   document.getElementById("btn").removeAttribute("disabled");
     }
 });
}
function showDiv(){
    document.getElementById("btn").disabled="disabled";
    //div.style.display="block";//显示该提示框
    div.classList.remove("hide");//从class属性值列表里面删除hide这个值
 div.classList.remove("fadeOut");
    div.classList.add("fadeInDown");//淡入
    isFadeOut = false;
    setTimeout(function(){
  div.classList.remove("fadeInDown")
        div.classList.add("fadeOut");//淡出
        isFadeOut = true;
    },2000);
}

综合案例

HTML代码+CSS代码+JS代码

<html>
<head>
<meta charset="utf-8" />
<style>
p{
 font-size:20px;
 border:2px solid black;
}
p:hover{
 border:2px solid blue;
 color: red;
}
div{
 background-color: red;
 color: white;
 width: 30%;
 height: 150px;
 float: left;
 text-align: center;
 margin: 10px;
}
</style>
<script type="text/javascript">
 var i = 0; //
 var e1;
 var e2; 
 function change7(){
  //根据id的内容找到第一个灯泡，e1就是第一个灯泡
  e1 = document.getElementById("img01");
  //根据id的内容找到第二个灯泡，e2就是第二个灯泡
  e2 = document.getElementById("img02");
  setInterval(
   function(){
    change(e1);//改变第一个灯泡的状态
   },2000);
  setInterval(
   function(){
    change(e2);//改变第二个灯泡的状态
   },1000);
 }
 function change(e){     //变量e表示被点击的元素
  if(e.src.match("bulboff")){  //如果灯泡不亮的话
   e.src = "img/pic_bulbon.gif"; //图片的地址修改为pic_bulbon.gif
  }else{       //否则
   e.src = "img/pic_bulboff.gif"; //图片的地址修改为pic_bulboff.gif
  }
 } 
 function change6(e){
  i++;//
  if(i==1){
   e.innerHTML="<h1>点击我</h1><h1>再点一次</h1>";//
  }
  if(i==2){
   e.innerHTML="<h1>谢谢你</h1>";//
  }
  if(i==3){
   e.innerHTML="<h1>再见</h1>";//
  }
  if(i==4){
   e.style.display="none";//
  }  
 }
 function change4(e){
  console.log("abc");
  e.innerHTML="<h1>谢谢你</h1>";
 }
 function change5(e){
  //console.log("abc");
  e.innerHTML="<h1>鼠标移上来</h1>";
 }
 function info(){
  alert("hello js");
 }
</script>
</head>
<body onload="change7();">
<h1>这是一个标题</h1>
<div onmouseover="change4(this);" onmouseout="change5(this);">
 <h1>鼠标移上来</h1>
</div>
<div onclick="change6(this);">
 <h1>点击我</h1>
</div>
<h1 style="clear:both;">这是一个标题</h1>
<p>
6月18日，记者从商务部网站获悉，上周（6月10日至16日）全国食用农产品市场价格比前一周下降0.6%。<br/>其中，30种蔬菜平均批发比前一周下降4%，呈加速回落趋势。
</p>
<h1>这是一个标题</h1>
<img src="img/pic_bulboff.gif" id="img01"><!--this表示当前这个元素-->
<img src="img/pic_bulboff.gif" id="img02"><!--this表示当前这个元素-->
<h1>这是一个标题</h1>
<input type="button" value="点击我" onclick="info();"/>
<input type="button" value="点击我" onclick="info();"/>
<input type="button" value="点击我" onclick="info();"/>
</body>
</html>

表单校验

HTML代码+CSS代码+JS代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
 .error{
  color:red;
  font-size: 12px;
 }
 .hide{
  display: none;
 }
</style>
<script type="text/javascript">
 var form = undefined;
 var span = undefined; 
 /**
  * 根据正则表达式检查输入框里面的内容是否合法
  * @param {Object} box 表示输入框
  * @param {Object} reg 表示正则表达式
  */
 function checkItem(box,reg){
  form = document.getElementById("register");
  span = box.nextSibling.nextSibling;
  if(reg.test(box.value)){
   span.classList.add("hide");
   return true;
  }else{
   span.classList.remove("hide");
   return false;
  }
 } 
 /**
  * 检查确认密码是否正确
  * @param {Object} box 表示确认密码输入框
  */
 function checkPassword2(box){
  span = box.nextSibling.nextSibling;
  var pwd = document.getElementById("passwd").value;
  if(box.value==""||box.value==undefined){//判断确认密码是否为空
   span.classList.remove("hide");
   return false;
  }
  if(box.value==pwd){//判断确认密码和密码是否相同
   span.classList.add("hide");
   return true;
  }else{
   span.classList.remove("hide");
   return false;   
  }
 } 
 /**
  * 校验表单数据是否合法
  */
 function validate(){
  form = document.getElementById("register");
  //获取用户名输入框
  var userBox = form.username;
  //获取密码输入框
  var pwdBox = form.passwd;
  //获取确认密码输入框
  var pwd2Box = form.passwd2; 
  //获取手机号码输入框
  var mobileBox = form.mobile;
  var usernameIsOk = checkItem(userBox,/^\w{6,}$/);//
  var passwordIsOk = checkItem(pwdBox,/^.{8,}$/);//
  var password2IsOk = checkPassword2(pwd2Box);
  var mobileIsOk = checkItem(mobileBox,/^\d{11}$/);
  if(usernameIsOk&&passwordIsOk&&password2IsOk&&mobileIsOk){
   alert("数据已经提交");
   return true;
  }else{
   alert("输入的内容错误，提交失败！");
   return false;
  }  
 }
</script>
</head>
<body>
<form action="#" method="post" id="register" onsubmit="return validate();">
<table border="0" width="100%">
<tr>
 <th width="20%">*用户名：</th>
 <td>
  <input type="text" name="username" id="username" onblur="checkItem(this,/^\w{6,}$/);" />
  <span class="hide error">用户名不能为空，不能使用中文，字符个数不能少于6个</span>
 </td>
</tr>
<tr>
 <th>*密码：</th>
 <td>
  <input type="password" name="passwd" id="passwd" onblur="checkItem(this,/^.{8,}$/);"/>
  <span class="hide error">密码不能为空，密码位数不能少于8位</span>
 </td>
</tr>
<tr>
<th>*确认密码：</th>
<td>
 <input type="password" name="passwd2" id="passwd2" onblur="checkPassword2(this);"/>
 <span class="hide error">确认密码不能为空，且确认密码必须与密码相同</span>
</td>
</tr>
<tr>
 <th>*手机号码：</th>
 <td>
  <input type="text" name="mobile" id="mobile" onblur="checkItem(this,/^\d{11}$/);"/>
  <span class="hide error">手机号码必须是11位数字</span>
 </td>
</tr>
<tr><td></td><td><input type="submit" value="注册"/></td></tr>
</table>
</form>
</body>
</html>

参考资料

[01] JavaScript 使用
http://www.w3school.com.cn/js/js_shiyong.asp
[02] Document 对象方法
http://www.w3school.com.cn/jsref/dom_obj_document.asp
[03] JS全局函数
http://www.w3school.com.cn/jsref/jsref_obj_global.asp
[04] Window 对象方法
http://www.w3school.com.cn/jsref/dom_obj_window.asp
[05] JavaScript HTML DOM 事件
http://www.w3school.com.cn/js/js_htmldom_events.asp
[06] HTML DOM Event 对象
http://www.w3school.com.cn/jsref/dom_obj_event.asp
[07] JavaScript Timing 事件
http://www.w3school.com.cn/js/js_timing.asp
[08] CSS3 动画
http://www.w3school.com.cn/css3/css3_animation.asp
[09] css3+原生js实现toast提示层弹框（淡入淡出动画效果）
https://blog.csdn.net/codeTnt/article/details/81030077
[10] 前端必须珍藏六个CSS3动效库
https://www.jianshu.com/p/36e604232e6e
[11] Animate.css动画演示
http://www.jq22.com/yanshi819
[12] Animate.css的使用
https://www.cnblogs.com/e-cat/p/8439221.html
[13] JavaScript 算术
http://www.w3school.com.cn/js/js_arithmetic.asp
[14] 个人所得税计算
http://www.zhicheng.com/n/20181128/232743.html
[15] 新个税税率表
https://www.gerensuodeshui.cn/view/2018-10-11/b534ba68236ba543ae44.html
[16] JavaScript trim() 方法
https://www.runoob.com/jsref/jsref-trim.html
[17] JavaScript String 对象（字符串对象）
https://www.runoob.com/jsref/jsref-obj-string.html
[18] JavaScript toFixed() 方法
http://www.w3school.com.cn/jsref/jsref_tofixed.asp
[19] HTML DOM confirm() 方法
http://www.w3school.com.cn/jsref/met_win_confirm.asp
[20] JavaScript parseFloat() 函数
http://www.w3school.com.cn/jsref/jsref_parseFloat.asp
[21] JavaScript parseInt() 函数
http://www.w3school.com.cn/jsref/jsref_parseInt.asp
[22] JavaScript isNaN() 函数
http://www.w3school.com.cn/jsref/jsref_isNaN.asp
[23] 最全面的常用正则表达式大全
https://www.cnblogs.com/yunspider/p/8280132.html
[24] 正则表达式总结
https://www.cnblogs.com/yyds/p/6913550.html

微信扫一扫关注公众号

点击链接加入群聊

https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105

勇敢的兵

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript编程入门

知识点1）使用浏览器请求网页的时候，浏览器会去后台服务器上下载网页的HTML文档2）HTML文档里面可以通过script标签引入外部的JS文件，JS文件的访问路径可以通过src属性设置3）浏览器根据这些JS文件的访问路径到指定的远程服务器上进行下载4）当Web事件（比如点击事件，鼠标事件，表单提交等）发生时，浏览器就会执行本地JS文件里面的相关代码5）有技术背景的用户可以修改本地的JS代...
复制链接

扫一扫

专栏目录