【JavaScript脚本】——T2事件操作

自定义函数

function 函数名 ( 参数1,参数2){

执行语句

}

function fun(obj){return obj;
}

函数的使用

可以通过调用函数名称的方式直接使用函数：

<script>function max(x, y) {if (x > y) {return x;} else {return y;}}document.write(max(10, 20));
</script>

系统函数

格式化parseInt()与parseFloat()函数

<script>var num = 12345;document.write(num % 10);document.write("<br/>");document.write(num / 10 % 10);document.write("<br/>");document.write(num / 100 % 10);document.write("<br/>");document.write(num / 1000 % 10);document.write("<br/>");document.write(num / 10000);document.write("<hr/>");var num1 = parseInt(12345);document.write(parseInt(num1) % 10);document.write("<br/>");document.write(parseInt(num1 / 10) % 10);document.write("<br/>");document.write(parseInt(num1 / 100) % 10);document.write("<br/>");document.write(parseInt(num1 / 1000) % 10);document.write("<br/>");document.write(parseInt(num1 / 10000));
</script>

var num = "3.14f";
//输出3.14
document.write(parseFloat(num));

var num = "f3.14f";
//输出【NaN】
document.write(parseFloat(num));

var num = "123";
//输出false
document.write(isNaN(num));

eval() 函数

字符串公式计算

document.write(eval("5+6+11+99*12-7/3*66"));

JS计算器demo1、

一般计算方式:

<p><input type="text" id="x" placeholder="请输入X值:" />
</p>
<p><input type="text" id="ysf" placeholder="请输入运算符:" />
</p>
<p><input type="text" id="y" placeholder="请输入Y值:" />
</p>
<p><input type="button" onclick="calc()" value="计算" />
</p>
<div id="show"></div>
<script>function calc() {var x = document.getElementById("x").value;var ysf = document.getElementById("ysf").value;var y = document.getElementById("y").value;if (ysf == '+') {document.getElementById("show").innerText = parseFloat(x) + parseFloat(y);} else if (ysf == '-') {document.getElementById("show").innerText = parseFloat(x) - parseFloat(y);} else if (ysf == '*') {document.getElementById("show").innerText = parseFloat(x) * parseFloat(y);} else if (ysf == '/') {document.getElementById("show").innerText = parseFloat(x) / parseFloat(y);} else {document.getElementById("show").innerText = "无此运算";}}
</script>

JS计算器demo2、

eval() 计算方式:

<p><input type="text" id="x" placeholder="请输入X值:" />
</p>
<p><input type="text" id="ysf" placeholder="请输入运算符:" />
</p>
<p><input type="text" id="y" placeholder="请输入Y值:" />
</p>
<p><input type="button" onclick="calc()" value="计算" />
</p>
<div id="show"></div>
<script>function calc() {var x = document.getElementById("x").value;var ysf = document.getElementById("ysf").value;var y = document.getElementById("y").value;document.getElementById("show").innerText = eval(x + ysf + y);}
</script>

事件：

onblur失去焦点事件:

<p><input type="text" id="x" placeholder="请输入X值:" onblur="REx(this)" />
</p>
<p><input type="text" id="ysf" placeholder="请输入运算符:" onblur="REx(this)"
</p>
<p><input type="text" id="y" placeholder="请输入Y值:" onblur="REx(this)" />
</p>
<p><input type="button" onclick="calc()" value="计算" />
</p>
<div id="show"></div>
<script>function calc() {var x = document.getElementById("x").value;var ysf = document.getElementById("ysf").value;var y = document.getElementById("y").value;document.getElementById("show").innerText = eval(x + ysf + y);}function REx(o) {if (o.value == "") {alert("不能有空值");}}
</script>

onchange值改变事件:

<p><select onchange="change(this)"><optgroup label="三原色"><option value="red">红色</option><option value="yellow">黄色</option><option value="blue">蓝色</option><option value="some">杂色</option></optgroup></select>
</p>
<div id="show"></div>
<script>function change(o) {var color = o.value;switch (color) {case "red":document.body.style.backgroundColor = "red";break;case "yellow":document.body.style.backgroundColor = "yellow";break;case "blue":document.body.style.backgroundColor = "blue";break;default:document.body.style.backgroundColor = "#ffffff";break;}}
</script>

onSubmit事件:

主要用于校验数据

<form onclick="test.html" onsubmit="chick(this)"><p><input type="text" name="userName" placeholder="请输入用户名" /></p><p><input type="submit" value="提交" /></p>
</form>
<div id="show"></div>
<script>function chick(obj) {alert('阻止提交数据' + obj.userName.value);return false;}
</script>

思考与记忆：

select修改值时触发的事件名称是什么？

【JavaScript脚本】——T2事件操作相关推荐

前端JavaScript之DOM事件操作~都是干货
下面是对DOM操作事件的整理,希望可以帮助到有需要的小伙伴~ 文章目录 DOM事件操作 JavaScript的基础事件代码书写步骤 1.获取绑定事件的元素 2.绑定事件 3.编写事件注意事项 D ...
JavaScript脚本语言 -DOM - 事件基础与操作元素细节
文章目录事件基础(三要素) 1.事件源 2.事件类型 3.事件处理程序处理事件思路(代码举例) 常见的鼠标事件操作元素(DOM核心) 改变元素内容(innerText) 案例1 案例2 改变元素 ...
前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍...
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
母版事件中注册javascript脚本
母版事件中注册javascript脚本 ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ Title :㈠母版等事件中注册javascript脚本 De ...
html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
vba 执行网页javascript_《SeleniumBasic 3.141.0.0 - 在VBA中操作浏览器》系列文章之十九：执行JavaScript脚本...
SeleniumBasic中的IWebDriver对象的ExecuteScript方法用于执行JavaScript脚本.语法如下 Function ExecuteScript(script As St ...
python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...
昨日内容回顾 1.三种引入方式1.行内js <div onclick = 'add(3,4)'></div>//声明一个函数function add(a,b){}2.内接js& ...
javascript脚本语言_10分钟快速掌握Javascript核心特性
JavaScript的历史版本其中ES5个人认为是使用时间最长也是最稳定的版本.基于该版本衍生出来的很多经典框架诸如ext,propertype.js,jquery,easyUI都是这个时代的杰作. ...
JavaScript脚本语言介绍并实现第一个Hello World程序
1.JavaScript是Web页面中的一种脚本编程语言,也是一种通用的.跨平台的.基于对象和事件驱动并具有安全性的脚本语言,具有与Java类似的语法.它不需要进行编译,而是直接嵌入在HTML页面 ...

【JavaScript脚本】——T2事件操作

【JavaScript脚本】——T2事件操作

自定义函数

函数的使用

系统函数

格式化parseInt()与parseFloat()函数

eval() 函数

JS计算器demo1、

JS计算器demo2、

事件：

onblur失去焦点事件:

onchange值改变事件:

onSubmit事件:

思考与记忆：

【JavaScript脚本】——T2事件操作相关推荐

最新文章

热门文章