HTML实现加减乘除的计算器+JavaScrip小知识点

简介: HTML实现加减乘除的计算器+JavaScrip小知识点

下面是一些小的知识点,可以看看,网页的计算机代码在下面,小伙伴们花点耐心,

1、form表单


form提交数据

提交方式有两种:action提交路径,mothod提交方式

提交方式有两种:get显示数据,post隐藏数据,

input:属性

name起名字,id唯一,checked单选框选中,selected下拉框选中,select下拉框,option列表选项,textarea文本域,text文本框,password密码框,radio单选按钮,CheckBox多选框,submit提交按钮,image图片提交按钮,file文件提交


2、弹框


confirm确认框:例如:你登录一个网站,会有广告弹框,你点击确认他就会给你跳转另外一个页面

alert信息弹框:就例如我们微信、QQ收到消息,手机会有弹框提示

prompt输入框:登陆一个界面,会从上面弹出一个文本框,让你填信息


3、打印语句


页面打印:

document.write

控制台打印:

console.info();
(document.getElementByID('对对对').value)


4、单击事件、函数格式


<button οnclick="js()">+</button>
            function js(){}


5、根据标签id获取标签对象的语法


decument.getElemenByID("ggg").value=值;


6、判断对象的数据类型


alert(typeof(值))


7、数据类型转换


parseFloat(),parseInt();


下面界面图,没有设样式之类的,可以直接用,里面有代码注释,职场小白也看得懂

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <script type="text/javascript">
    //函数格式
    function js(){
    //获取第一个数字
    var num1 = document.getElementById('n1').value;
    //把num1转换为数字:int float
    num1 = parseFloat(num1);
    //获取第二个数字
    var num2 = document.getElementById("n2").value;
    num2 = parseFloat(num2);
    //计算结果
    var sum = num1+num2;
    //把结果赋值到第三个文本框
    document.getElementById("n3").value=sum;
    }
  </script>
  </head>
  <body>
  第一个数:<input id="n1" type="text" />
  <br>
  第二个数:<input id="n2" type="text" />
  <br>
  &nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;
  <button onclick="js()">+</button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <button>-</button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <button>*</button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <button>/</button>
  <br>
  计算结果:<input id="n3" type="text" />
  <br>
  </body>
</html>
相关文章
|
4月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
45 6
|
7月前
|
前端开发
详解HTML的盒模型以及HTML相关知识点
详解HTML的盒模型以及HTML相关知识点
56 0
|
8月前
|
前端开发 数据安全/隐私保护
HTML内容部分知识点
HTML内容部分知识点
|
1月前
|
SQL 移动开发 前端开发
HTML知识点
HTML知识点
|
2月前
|
数据安全/隐私保护
HTML中常用知识点整理
HTML中常用知识点整理
17 0
|
2月前
|
移动开发 前端开发 JavaScript
HTML5知识点总结
HTML5知识点总结
12 0
|
3月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
[HTML、CSS]知识点
48 0
[HTML、CSS]知识点
|
4月前
|
前端开发
好看的前端计算器代码分享(html+css+js制作计算器)
好看的前端计算器代码分享(html+css+js制作计算器)
39 0
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
html——超文本标记语言,知识点小结(2)
html——超文本标记语言,知识点小结(2)
29 0
|
4月前
html——超文本标记语言,知识点小结
html——超文本标记语言,知识点小结
45 0