【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事件操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。