【JavaScript脚本】——T2事件操作
自定义函数
代码语言:javascript复制function 函数名 ( 参数1,参数2){ 执行语句 }
function fun(obj){
return obj;
}
函数的使用
代码语言:javascript复制可以通过调用函数名称的方式直接使用函数:
<script>
function max(x, y) {
if (x > y) {
return x;
} else {
return y;
}
}
document.write(max(10, 20));
</script>
系统函数
格式化parseInt()与parseFloat()函数
代码语言:javascript复制<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>
代码语言:javascript复制var num = "3.14f";
//输出3.14
document.write(parseFloat(num));
代码语言:javascript复制var num = "f3.14f";
//输出【NaN】
document.write(parseFloat(num));
代码语言:javascript复制var num = "123";
//输出false
document.write(isNaN(num));
eval() 函数
代码语言:javascript复制字符串公式计算
document.write(eval("5 6 11 99*12-7/3*66"));
JS计算器demo1、
一般计算方式:
代码语言:javascript复制<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() 计算方式:
代码语言:javascript复制<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失去焦点事件:
代码语言:javascript复制<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值改变事件:
代码语言:javascript复制<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事件:
主要用于校验数据
代码语言:javascript复制<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修改值时触发的事件名称是什么?