一、DOM操作

JavaScript直接操作页面的元素的方法集合，称为DOM（Document Object Model），是一套JS代码接口，另外，还有一套BOM（Brower Object Model），用于通过JS直接操作浏览，比如前进、后退、历史、导航、刷新等。

二、JS定位元素

1.JS代码的执行顺序

2.JS元素的定位

三、利用JS实现基本运算

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蜗牛计算器-DIV版</title><!-- 下面的是CSS样式 --><style>/* 设置顶部标题栏样式 */#top {width: 450px;height: 50px;margin: auto;background-color: gray;/* border-radius: 10px; *//* border-top-left-radius: 10px; */}#top .point {width: 20px;height: 20px;float: left;margin-left: 10px;margin-top: 15px;border-radius: 10px;}#top .red {background-color: red;}#top .blue {background-color: blue;}#top .green {background-color: green;}#calc-title {font-size: 22px;color: white;float: right;margin-top: 10px;margin-right: 10px;}/* 设置结果显示栏样式 */#result {width: 436px;height: 50px;margin: auto;background-color: white;border: solid 2px red;text-align: right;font-size: 35px;padding-right: 10px;}/* 设置按钮区域的样式 */#button {width: 450px;height: 422px;background-color: gray;margin: auto;}#button div {width: 108px;height: 80px;float: left;background-color: #7fffd4;margin: 2px;line-height: 80px;text-align: center;font-size: 26px;}/* 使用伪类选择器设置鼠标悬停效果 */#button div:hover {background-color: orangered;}</style><!-- 下面的是JS代码 --><script type="text/javascript">// 与function同级的变量，称为全局变量，可以在当前范围内的任意function中使用// 定义一个开关变量，用于判断最后一次输入是否是运算符var isOperatorClicked = false;    // 给函数传递参数，用于输入哪一个数字function clickNumber(number) {var result = document.getElementById("result");// result.innerHTML += number;  result.innerHTML = result.innerHTML + number;isOperatorClicked = false;     // 当用户再次点击了数字后，重置开关为可点击运算符}// 输入运算符function clickOperator(operator) {var result = document.getElementById("result");if (isOperatorClicked == false) {result.innerHTML += operator;isOperatorClicked = true;   // 表示运算符被点击}}// 计算结果function doCalc() {var result = document.getElementById("result");var expression = result.innerHTML;result.innerHTML = eval(expression);}// 清空结果function doClear() {document.getElementById("result").innerHTML = "";isOperatorClicked = false;}// 回退删除最后一个字符function doBack() {var result = document.getElementById("result");var len = result.innerHTML.length;    // 取字符串长度result.innerHTML = result.innerHTML.substr(0,len-1);    // 取字符串的其中一部分内容}</script></head>
<body><div id="top"><div class="point red"></div><div class="point blue"></div><div class="point green"></div><div id="calc-title">蜗牛计算器</div></div><div id="result" name="result"></div><div id="button"><div onclick="doClear()">AC</div><div>+/-</div><div onclick="clickOperator('%')">%</div><div onclick="clickOperator('/')">÷</div><div onclick="clickNumber(7)">7</div><div onclick="clickNumber(8)">8</div><div onclick="clickNumber(9)">9</div><div onclick="clickOperator('*')">*</div><div onclick="clickNumber(4)">4</div><div onclick="clickNumber(5)">5</div><div onclick="clickNumber(6)">6</div><div onclick="clickOperator('-')">-</div><div onclick="clickNumber(1)">1</div><div onclick="clickNumber(2)">2</div><div onclick="clickNumber(3)">3</div><div onclick="clickOperator('+')">+</div><div onclick="clickNumber(0)">0</div><div onclick="doBack()">删除</div><div onclick="clickOperator('.')">.</div><div onclick="doCalc()">=</div></div></body>
</html>

JavaScript元素定位相关推荐

css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
如何获取某个标签下所有的元素id_D3库实践笔记之元素定位与数据绑定 |可视化系列33...
D3根据数据的内容操纵HTML文档对象,实现把数据变成可视图.要操纵文档对象,例如在里添加一个.编辑标签里的一个矩形,要完成这些首先需要能定位到我们需要操作的元素.再结合数据操作这些元素. 本篇具体展 ...
不得不说--自动化测试元素定位与用例设计
关于自动化测试,经常被问到元素的定位与如何设计用例. 很多时间我也帮不了你解决实际的问题,只能从个人脚本谈谈如何看待这些问题. 不得不说之元素定位虽然,本章写了十几篇文章来讲元素的定位与操作,对 ...
appium怎么操作物理返回键_这些Appium常用元素定位技巧，你掌握了几种？
今天跟大家分享下Appium的元素定位的一些小技巧. Appium对于处理原生的android应用直接通过uiautomatorviewer.bat这个工具来获取元素定位. 在开始appium元素定位 ...
大型情感剧集Selenium：3_元素定位 #华为云·寻找黑马程序员#
关于昨天的文章今天有朋友反馈,代码运行的时候,selenium提示警告 DeprecationWarning: use options instead of chrome_options drive ...
selenium--特殊元素定位
该篇博客总结特殊元素(select.radio\checkbox.时间控件.文件上传.图片验证码.模拟鼠标操作.Js 或 JQuery调用)操作. 1.select @Testpublic void ...
JavaScript 浮动定位提示效果
本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧. 这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求用起来更方便,能 ...
appium自动化,appium元素定位
appium自动化,appium元素定位 Appium是一款综合性软件,可让您在本地.移动或混合应用程序上执行复杂的测试. 简而言之,appium自动化框架允许您在不需要 SDK 或在每次测试会话后重 ...

JavaScript元素定位

一、DOM操作

二、JS定位元素

三、利用JS实现基本运算

JavaScript元素定位相关推荐

最新文章

热门文章

JavaScript元素定位

一、DOM操作

二、JS定位元素​​​​​​​

三、利用JS实现基本运算

JavaScript元素定位相关推荐

最新文章

热门文章

二、JS定位元素