以下为本人大一选修课《网页设计与网站开发》的实验作业题，均为本人原创，分享给大家。如有不足之处欢迎指出。

1.题目：

实验5、新建页面test5.html，利用JavaScript编写如下效果的计算工资小程序。

注：

网页运行效果以Microsoft Edge为准，其他浏览器可能显示会出问题。

2.代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test5</title>
<style type="text/css">/*表格细边框设置【border="1"还是觉得粗，这么设置会变细】*/table{border-collapse:collapse;border:none;}td{border:solid #000 2px;/*如果想要更细可以改成1px*/}
</style>
</head>
<body>
<script type="text/javascript">function show(){var name = document.getElementById("textfield").value;var salary1 = document.getElementById("textfield2").value;var dele = document.getElementById("textfield3").value;var salary2 = document.getElementById("textfield4").value;window.alert("姓名："+name+"\n应发工资："+salary1+"\n扣款："+dele+"\n实发工资："+salary2);}
</script>
<table width="400px"><tr><td>计算个人工资</td></tr><tr><td><form name="form1" method="post" action=""><p><label for="textfield">姓名：  </label><input type="text" name="textfield" id="textfield"></p></form><form name="form2" method="post" action=""><p><label for="textfield2">应发工资： </label><input type="text" name="textfield2" id="textfield2"></p></form><form name="form3" method="post" action=""><p><label for="textfield3"></label>扣款： <input type="text" name="textfield3" id="textfield3"></p></form><form name="form4" method="post" action=""><label for="textfield4"></label>实发工资： <input type="text" name="textfield4" id="textfield4"></form><p><input type="submit" name="button" id="button" value="提交" onClick="show()"></p></td></tr>
</table></body>
</html>

3.实验效果如下：

《网页设计与网站开发》实验题不定期更新，有需要可以点击链接：

https://blog.csdn.net/weixin_60897770/category_11835918.html?spm=1001.2014.3001.5482

如有帮助可以帮忙点个赞嘛……谢谢啦！

【JavaScript编写计算工资小程序】【表格细边框设置】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第十章】JavaScript基础——【传智播客】实验作业题【实验5】相关推荐

【单选按钮区域实现三选一】【2018腾讯手游排行榜】【HTML表格标签】【网页设计与网站开发HTML、CSS、JavaScript】【第七章】表单——实验作业题【实验3、4、5】
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录 1.实验3 题目代码实验效果 2.实验4 题目代码实验效果 3.实验 ...
《传智播客.Net培训.net视频教程》(.net视频asp.net培训传智播客asp.net视频教程开放课程c#视频移动开发winform SQL ADO.Net HTML JavaScript
本资源重要通知 2011年4月传智播客.Net培训-免费公开课现场视频 [重磅内容]微软移动开发介绍1-早起的鸟儿有食吃.rar 详情 53.2MB [重磅内容]微软移动开发介绍2-windows.p ...
【传智播客郑州校区】辞掉7年工作转行程序员，为了理想在传智播客前行
小何,一位已经工作了7年的白领,生活和工作衣食无忧,是什么原因让她辞掉干了七年的工作,选择到传智播客郑州校区参加培训,成为程序员的呢? 其实做程序员,是小何心里早就存在的想法.大学毕业的时候她很想做程 ...
HTML期末大作业~ 小黄车ofo环保 ~学生网页设计作业源码(HTML+CSS)
HTML期末大作业~ 小黄车ofo环保 ~学生网页设计作业源码(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多 ...
幸福村站——成都传智播客程序猿写出你的烧烤代码
又是一个阳光明媚,风和日丽之天,假设作为程序猿的你还在键盘上苦苦的想着下一串代码该怎么写的话,那你就弱爆了.俗语说得好,学习要劳逸结合,写代码更是须要清晰的思维,在传智播客Java基础班开班一个月后, ...
传智播客.黑马程序员，学C++不再难！
众所周知,C++难.就好像博大精深的汉语比英语难,这是客观事实,我们并不否认. 但,转念想想,英语也不简单吧?从小学开始学,到了大学,挂在四六级上的同学数不胜数.可貌似没 ...
【简答网页】【网页进阶】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】网页基础与工具使用1——实验作业
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录 (一).简单网页 (二).网页进阶注: 若有图片文件,图片文件建议保存到根 ...
2014年马上要火的一段视频！传智播客教育集团程序员版《爸爸去哪儿》春节温情呈现！
春节临近,一年的奔波终将在此划一段落.这一年,作为程序员的你,有过辛酸苦楚,有过疲惫不堪,有过束手无策,--但只有拿起电话,听到电话那头父母的唠叨和叮嘱,只要看见儿女幸福快乐的微笑,所有的烦恼都抛诸脑 ...
揭秘传智播客毕业班的超级薪水7k内幕系列II----Offer工资表5.7k，为什么不能让老师就业就业...
在上海传智播客宋学生Java六期学员.在班级尚未毕业阶段,私自投递简历,而且逃课去面试,获得某国企的Offer.入职薪资5.7K,,兼有五险一金.饭补等齐全福利,因就业老师要求班级同学未毕业不要急于就 ...

【JavaScript编写计算工资小程序】【表格细边框设置】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第十章】JavaScript基础——【传智播客】实验作业题【实验5】

1.题目：

2.代码如下：

3.实验效果如下：

【JavaScript编写计算工资小程序】【表格细边框设置】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第十章】JavaScript基础——【传智播客】实验作业题【实验5】相关推荐

最新文章

热门文章