前端秘籍---经典前端案例（1）

weixin_47387063

已于 2024-05-21 14:47:00 修改

阅读量420

点赞数 3

文章标签：前端

于 2024-05-21 14:45:24 首次发布

本文链接：https://blog.csdn.net/weixin_47387063/article/details/139091166

版权

1.输入框转换字母转换大小写

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>英文字母大小写转换</title>

<style>

input {

margin-top: 40px;

}

</style>

</head>

<body>

<div id="contenter">

<h2>大小写转换</h2>

<input type="text" width="120px" placeholder="小写字母" class="btn"><br/>

<input type="text" width="120px" placeholder="大写字母" class="btn">

</div>

<script>

let input1 = document.getElementsByClassName("btn")[0];

let input2 = document.getElementsByClassName("btn")[1];

input1.addEventListener("input", function() {

let str = input1.value.toLowerCase();

input2.value = str.toUpperCase();

});

input2.addEventListener("input", function() {

let str = input2.value.toUpperCase();

input1.value = str.toLowerCase();

});

</script>

</body>

</html>

2.简单的密码验证

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>登录页面</title>

</head>



<body>

<div class="container">

<h1>登录页面</h1>

<form action="index.html" method="post">

<input type="text" placeholder="用户名" id="username"/><br>

<input type="password"placeholder="密码" id="password"/><br>

<input type="submit" value="登录" id="sub">

</div>

<script>

let username = document.getElementById('username');

let password = document.getElementById('password');

let sub = document.getElementById('sub');

let yhm = 'root';

let mm = '123456';

sub.addEventListener('click', function(e){

e.preventDefault();

if(username.value === yhm && password.value === mm){

alert('登录成功');

window.location.href = 'index.html';

}

else{

alert('用户名或密码错误');

}

})

</script>

</body>

</html>

3.猜数字游戏

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>猜数字游戏</title>

</head>

<body>

<h1>猜数字游戏，输入10以内的数字</h1>

<input type="text"> <br>

<input type="submit" value="确认提交" οnclick="guessNumer()"/>

<script>

// 创建一个10以内的随机数

var randomNum = Math.floor(Math.random() * 10) + 1;

// 显示随机数

function guessNumer() {

var inputNum = document.getElementsByTagName("input")[0].value;

if (inputNum == randomNum) {

alert("恭喜你，猜对了！");

} else if(inputNum > randomNum) {

alert("你输入的数字大了！");

}

else if(inputNum < randomNum) {

alert("你输入的数字小了！");

}

}

</script>

</body>

</html>