最适合新手练习JavaScript的小项目
2021/10/2 9:10:49
本文主要是介绍最适合新手练习JavaScript的小项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最适合新手练习JavaScript的小项目:网页计算器
网页计算器是由HTML和CSS以及最重要的JavaScript来构建出来的,能和普通的计算器一样进行各种运算包括开根号等等的复杂运算,并且有助于理解JavaScript中的面向对象和函数调用并且全长代码只有80行,是最适合新手的小项目了
不多BB上代码:
<!doctype html> <html lang="en"> <head> <!-- 添加文档头部内容 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <meta name="author" content="king"> <meta name="revised" content="king,08/05/2017"> <meta name="generator" content="WebStorm 2016.2.4"> <meta name="description" content="CSS & CSS3"> <meta name="keywords" content="HTML5, CSS, JavaScript"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>JavaScript 在线计算器</title> </head> <body> <!-- 添加文档主体内容 --> <header> <nav>JavaScript - 在线计算器(Calculator)</nav> </header> <hr> <!-- 添加文档主体内容 --> <table> <tr> <td colspan="1"> <input type="text" id="id-input-text-calculator" /> </td> <td colspan="1"> <input type="button" id="id-input-btn-calculator" onclick="on_cal_click()" value="计算"/> </td> <td colspan="1"> <div id="id-div-result"></div> </td> </tr> <tr> <td colspan="3"> <button type="button" id="id-btn-1" onclick="on_btn_click(this.id)" value="1">1</button> <button type="button" id="id-btn-2" onclick="on_btn_click(this.id)" value="2">2</button> <button type="button" id="id-btn-3" onclick="on_btn_click(this.id)" value="3">3</button> <button type="button" id="id-btn-add" onclick="on_btn_click(this.id)" value="+">+</button> </td> </tr> <tr> <td colspan="3"> <button type="button" id="id-btn-4" onclick="on_btn_click(this.id)" value="4">4</button> <button type="button" id="id-btn-5" onclick="on_btn_click(this.id)" value="5">5</button> <button type="button" id="id-btn-6" onclick="on_btn_click(this.id)" value="6">6</button> <button type="button" id="id-btn-minus" onclick="on_btn_click(this.id)" value="-">−</button> </td> </tr> <tr> <td colspan="3"> <button type="button" id="id-btn-7" onclick="on_btn_click(this.id)" value="7">7</button> <button type="button" id="id-btn-8" onclick="on_btn_click(this.id)" value="8">8</button> <button type="button" id="id-btn-9" onclick="on_btn_click(this.id)" value="9">9</button> <button type="button" id="id-btn-times" onclick="on_btn_click(this.id)" value="*">×</button> </td> </tr> <tr> <td colspan="3"> <button type="button" id="id-btn-0" onclick="on_btn_click(this.id)" value="0">0</button> <button type="button" id="id-btn-c" onclick="on_btn_click(this.id)" value="c">C</button> <button type="button" id="id-btn-equal" onclick="on_btn_click(this.id)" value="=">=</button> <button type="button" id="id-btn-divide" onclick="on_btn_click(this.id)" value="/">÷</button> </td> </tr> </table> <script type="text/javascript"> function on_cal_click() { var v_cal = document.getElementById("id-input-text-calculator").value; var v_result = eval(v_cal); document.getElementById("id-div-result").innerText = " 结果: " + v_result; } function on_btn_click(thisid) { var btn = document.getElementById(thisid); btn.addEventListener('click', function(event) { var v_value = event.target.value; console.log(v_value); if(v_value == "c") { document.getElementById("id-input-text-calculator").value = ""; } else if(v_value == "=") { on_cal_click(); } else { document.getElementById("id-input-text-calculator").value += v_value; } }, false); } </script> </body> </html>
完成之后的运行效果:
其中并没有使用css进行过多的渲染因为主要是对JavaScript的操作进行考验的,大家有兴趣的可以自己试试渲染一下。
在代码中第14~58行的代码通过
在第17行代码中input元素定义了一个文本框支持用户进行手动输入数字
第20行定义了onclick事件处理方法(“on_cal_click”)
第59~79行通过script标签定义了一段嵌入式JavaScript脚本
第60~64行主要是对自定义函数on_cal_click的具体功能实现,用来处理第二十行的功能键,主要通过eval方法计算表达式结果
第65~67行代码是表示自定义函数on_cal_click的具体实现,主要是通过addeventlistener事件方法监听用户的案件单击操作,并将用户输入的在第十七行代码中通过input元素定义输入到文本框中。
实际代码还是要靠自己去实践的。如果代码或者描述出现问题或者技术交流可以加QQ2029788643
这篇关于最适合新手练习JavaScript的小项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南