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>
相关文章
|
7月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
82 6
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
33 1
[HTML、CSS]知识点
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
HTML基础知识详解(下)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
HTML基础知识详解(下)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
|
2月前
|
Web App开发 前端开发 搜索推荐
HTML一些基础知识点
HTML一些基础知识点
|
3月前
|
存储 移动开发 前端开发
「offer来了」面试中必考的15个html知识点
该文章汇总了前端面试中常见的15个HTML知识点,涵盖了从HTML文档的规范书写、doctype声明的作用到新兴的HTML5标签应用及移动端viewport设置等内容,旨在帮助求职者更好地准备相关技术面试。
「offer来了」面试中必考的15个html知识点
|
4月前
|
移动开发 前端开发 搜索推荐
HTML基础知识点
HTML基础知识点
61 2
|
6月前
|
前端开发
HTML基础知识详解(中)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
HTML基础知识详解(中)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
|
6月前
|
前端开发 容器
HTML基础知识详解(上)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
HTML基础知识详解(上)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
|
6月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
53 1
|
6月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
83 1