JavaScript-T2
JavaScript-T2
前言
本次主要讲解的知识点是：
JavaScript自定义函数 JavaScript系统函数 JavaScript 事件 JavaScript 的常用事件
JavaScript自定义函数
<!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>什么是自定义函数?</title>
</head>
<body>
<script>
// function
// 自定义的一个叫做【eat】的函数，这里函数需要添加一个()用于传递参数,{}属于作用域。
function eat() {
// document.write("吃：蒸羊羔、蒸鹿儿、烧花鸡烧花鸭烧子鹅~");
console.log("李元霸·使得一手大锤·擂鼓瓮金锤");
alert("坐下宝马：");
console.log("一字没角板肋赖麒麟");
}
// 如何调用函数
// 最直接的调用，在浏览器加载的时候直接使用script中的函数即可。被动触发
// eat();
// 主动触发
// 判断数字大小的函数
function maxValue(x, y) {
result = 0;
if (x >= y) {
result = x;
} else {
result = y;
}
alert(result);
return result;
}
</script>
<hr/>
<!-- 通过单击事件触发 -->
<button onclick="eat()">主动触发eat()函数事件</button>
<hr/>
<button onclick="console.log(maxValue(5,6))">最大数值</button>
</body>
</html>状态1
状态2
判断大小：
基础计算
<!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>Document</title>
</head>
<body>
<!-- 通过按钮事件，修改input中的值 -->
<p>
<!-- 一个输入框，默认值是1，我们通过id进行其DOM操作 -->
<input type="text" id="addValue" value="1" />
</p>
<p>
<!-- 触发增加按钮以及减少按钮。 -->
<button onclick="add()">增加值</button>
<button onclick="sub()">减少值</button>
</p>
<script>
function add() {
// 通过document.getElementById来获取【addValue】，属性是value所以我们直接.value
var result = document.getElementById("addValue").value;
// result是获取到的input输入框的值，我们给其+1后重新赋值给咱们这个value
// 有一个get和一个set，获取值的时候是get。赋值的时候是set
document.getElementById("addValue").value = parseInt(result) + 1;
}
function sub() {
var result = document.getElementById("addValue").value;
document.getElementById("addValue").value = parseInt(result) - 1;
}
</script>
</body>
</html>
数值类型判断
<!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>Document</title>
</head>
<body>
<script>
// var str = "a123@999a66a77";
// console.log("格式化后的值：" + parseInt(str));
// var float_pi = "-3.1415926a5358";
// console.log("float浮点数的类型被格式化：" + parseFloat(float_pi));
var num = 66666.666;
if (isNaN(num)) {
console.log("不是数字：" + num);
} else {
console.log("是数字：" + num);
}
</script>
</body>
</html>字符串计算
<!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>字符串表达式计算</title>
</head>
<body>
<p>
<input type="text" id="nums" placeholder="输入计算表达式" />
</p>
<p>
<button onclick="calc()">计算</button>
</p>
<p>
<input type="text" id="show" placeholder="结果显示" readonly/>
</p>
<script>
function calc() {
// 获取id为nums的input输入框的value
// 先获取计算的表达式
var info = document.getElementById("nums").value;
//进行赋值与计算·计算的是在nums中获取的字符串
document.getElementById("show").value = eval(info);
}
</script>
</body>
</html>计算器
<!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>字符串表达式计算</title>
</head>
<body>
<input type="text" id="x" placeholder="x" />
<select id="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="y" placeholder="y" />
<button onclick="calc()">计算</button>
<p>
<input type="text" id="show" placeholder="结果显示" readonly/>
</p>
<script>
function calc() {
// 获取id为nums的input输入框的value
var x = document.getElementById("x").value;
var opt = document.getElementById("opt").value;
var y = document.getElementById("y").value;
//进行赋值与计算·计算的是在nums中获取的字符串
document.getElementById("show").value = eval(x + opt + y);
}
</script>
</body>
</html>属性修改
<!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>js实践触发</title>
</head>
<body>
<h1 onclick="UpdateColor(this)">祝愿·咱们2111班的男孩子都能找到自己合适的工作，祝愿女孩子都能知道自己心仪的伴侣。</h1>
<script>
function UpdateColor(o) {
// this代表将元素自身传递到函数中
var _this = o;
console.log(_this);
console.log("-------------------------------------");
// 这里由于重新构建了UI，故而前后两个输出结果是相同的
o.style.color = "skyblue"; //set操作，修改
o.style.backgroundColor = "pink"; //背景颜色修改
console.log(o);
}
</script>
</body>
</html>onChange事件
<!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>通过select下拉菜单修改背景颜色</title>
</head>
<body id="show">
<select id="ChangeColor" onchange="updateColor()">
<option value="skyblue">天蓝色</option>
<option value="red">红色</option>
<option value="pink" selected>粉色</option>
<option value="yellow">黄色</option>
<option value="#CE9178">土色</option>
</select>
<script>
// 全局中先加载一遍
updateColor();
function updateColor() {
var color = document.getElementById("ChangeColor").value;
document.getElementById("show").style.backgroundColor = color;
}
</script>
</body>
</html>鼠标移入移出事件
<!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>鼠标移入移除实践</title>
</head>
<body>
<style>
#show {
width: 600px;
height: 400px;
background-color: pink;
}
</style>
<div id="show" onmousemove="come_in()" onmouseout="GetOut()"></div>
<script>
function come_in() {
document.getElementById("show").innerHTML = "<h1>我是移入鼠标状态</h1>";
document.getElementById("show").style.backgroundColor = "skyblue";
}
function GetOut() {
document.getElementById("show").innerHTML = "<h1>我是移出鼠标状态</h1>";
document.getElementById("show").style.backgroundColor = "pink";
}
</script>
</body>
</html>失去焦点
<!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>失去焦点事件</title>
</head>
<body>
<p>
<input type="password" id="pwd" onblur="pwdLength()" placeholder="请输入密码" />
</p>
<script>
function pwdLength() {
var result = document.getElementById("pwd").value;
if (result.length < 6) {
console.log("密码长度小于6位，不安全。");
} else {
console.log("密码通过校验。");
}
}
</script>
</body>
</html>onSubmit事件
<!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>submit事件</title>
</head>
<body>
<form action="#" method="get" onsubmit="return Test()">
<p>
<input type="text" name="userName" placeholder="请输入账号" id="userName" />
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
<script>
function Test() {
var result = document.getElementById("userName").value;
if (result == "" || result.length < 6) {
console.log("验证失败");
return false;
} else {
console.log("验证成功");
return true;
}
}
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-12-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
