day16开始学习js

最新推荐文章于 2024-08-03 09:21:06 发布

RealRecall

最新推荐文章于 2024-08-03 09:21:06 发布

阅读量180

点赞数

分类专栏：初学前端开发

本文链接：https://blog.csdn.net/RealRecall/article/details/109734618

版权

初学前端开发专栏收录该内容

46 篇文章 1 订阅

订阅专栏

经过前些天的复习，前两天得以快速完成了day12-15的任务，于是html和css的学习暂时告于段落。

JS笔记

总用时约3小时

API：应用程序接口（Application Programming Interfaces）

API分两种

浏览器 API

文档对象模型 API（DOM（Document Object Model）API）能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗，或者显示了一些新内容（像上文小 demo 中看到那样），这就是 DOM 在运行。
地理位置 API（Geolocation API）获取地理信息。这就是为什么谷歌地图可以找到你的位置，而且标示在地图上。
画布（Canvas）和 WebGL API 可以创建生动的 2D 和 3D 图像。人们正运用这些 web 技术制作令人惊叹的作品。参见 Chrome Experiments 以及 webglsamples。
诸如 HTMLMediaElement 和 WebRTC 等影音类 API 让你可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示（试用简易版截图 demo 以理解这个概念）。

第三方 API

Twitter API、新浪微博 API 可以在网站上展示最新推文之类。
谷歌地图 API、高德地图 API 可以在网站嵌入定制的地图等等。

html中input标签的placeholder属性：在不输入时，浅色显示内容。

我制作了一个小计算器！

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>        
    <input id="first-number" type="number" value="0" placeholder="第一个数字">
    <input id="second-number" type="number" value="0" placeholder="第二个数字">
    <button id="add-btn">加</button>
    <button id="minus-btn">减</button>
    <button id="times-btn">乘</button>
    <button id="divide-btn">除</button>
    <p id="result">运算结果</p>
    <script src="myScript.js"></script>
</body>
</html>

JS:

var x1 = document.getElementById("first-number").value;
var x2 = document.getElementById("second-number").value;
var add = x1 + x2;
var subtract = x1 - x2;
var multiply = x1 * x2;
var divide = x1 / x2;
function calculation1() {
  x1 = document.getElementById("first-number").value;
  x2 = document.getElementById("second-number").value;
  add = parseFloat(x1) + parseFloat(x2);
  document.getElementById("result").innerHTML = add;
}
function calculation2() {
  x1 = document.getElementById("first-number").value;
  x2 = document.getElementById("second-number").value;
  subtract = parseFloat(x1) - parseFloat(x2);
  document.getElementById("result").innerHTML = subtract;
}
function calculation3() {
  x1 = document.getElementById("first-number").value;
  x2 = document.getElementById("second-number").value;
  multiply = parseFloat(x1) * parseFloat(x2);
  document.getElementById("result").innerHTML = multiply;
}
function calculation4() {
  x1 = document.getElementById("first-number").value;
  x2 = document.getElementById("second-number").value;
  divide = parseFloat(x1) / parseFloat(x2);
  document.getElementById("result").innerHTML = divide;
}

document.getElementById("add-btn").addEventListener("click", calculation1);
document.getElementById("minus-btn").addEventListener("click", calculation2);
document.getElementById("times-btn").addEventListener("click", calculation3);
document.getElementById("divide-btn").addEventListener("click", calculation4);

其中用到了一些东西，暂且写一下用法：
getElementById：通过元素id获得元素
parseFloat：转换为浮点型
addEventListener：添加事件监听器（事件，发生事件后执行的函数）

用的行数挺多的，应该有更好的方法。

RealRecall

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day16开始学习js

经过前些天的复习，前两天得以快速完成了day12-15的任务，于是html和css的学习暂时告于段落。JS笔记API：应用程序接口（Application Programming Interfaces）API分两种浏览器 API文档对象模型 API（DOM（Document Object Model）API）能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗，或者显示了一些新内容（像上文小 demo 中看到那样），这就是 DO
复制链接

扫一扫

专栏目录