JavaScript開発事例20件(1)
1 日あたり 5 個ずつ、20 個の JavaScript サンプルが 4 日以内に更新される予定ですので、ご期待ください。期間中にはJavaScriptの復習もあり、これらを学んだ後にフロントエンドデザインを完成させていきますが、このコラムも更新していきます！
o( ￣▽￣ )ブφ(゜▽゜*)♪ (p≧w≦q)
支払いまでの 10 秒のカウントダウン
コード
デモ1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>支付十秒倒计时</title>
<style type="text/css">
body,h3{
margin: 0;
padding: 0;
}
.box{
width: 500px;
margin: 50px auto 0;
background-color: #ddd;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h3>订单确认</h3>
<p>商品：Web前端课程</p>
<p>原价:1980元</p>
<p>内容：HTML、CSS、JS</p>
<p>地址：辽宁省大连市</p>
<p>
<button>取消</button>
<button>支付</button>
</p>
</div>
</body>
<script type="text/javascript">
'user strict';
document.getElementsByTagName('button')[1].onclick=function(){
let res=window.confirm('您确定要支付吗');
if(res){
location.href='./demo2.html';
}
}
</script>
</html>
デモ2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>支付成功</title>
<style type="text/css">
body,
h2 {
margin: 0;
padding: 0;
}
body {
background-color: #ddd;
}
.box{
background-color: rgba(0, 0, 0, 0.5);
width: 500px;
margin: 200px auto 0;
text-align: center;
}
#jump {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<div class="box">
<h2>恭喜您，支付成功</h2>
<span id="jump">10</span>秒后自动返回首页
<p><button>立即返回</button></p>
</div>
<script type="text/javascript">
//逻辑：加载页面触发定时器，10s
window.onload=function(){
let time=10;
setInterval(()=>{
time--;
document.getElementById('jump').innerText=time;
if(time==0){
// 计时结束发生跳转
location.href='https://blog.csdn.net/pipihan21';
}
},1000)//间隔为1s
}
document.getElementsByTagName('button')[0].onclick=function(){
location.href='https://blog.csdn.net/pipihan21';
}
</script>
</body>
</html>
効果
検証コードの生成と検証
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证码生成及校验</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
}
.Box{
margin: 100px auto 0;
text-align: center;
}
.box {
width: 300px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
margin: auto;
text-align: center;
}
.boxCode {
width: 300px;
background-color: rgba(0, 0, 0, 0.5);
margin: auto;
}
.code {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="Box">
<div class="boxCode">
<span class="code" id="code"></span>
<a href="" id="linkbt">看不清换一张</a>
</div>
<div class="box">
<label for="inputCode">验证码：</label>
<input type="text" id="inputCode">
<input type="button" id="Button1" value="确定">
</div>
</div>
<script type="text/javascript">
'user strict';
function getCode(){
var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
var str = '';
for (let i = 0; i < 6; ++i) {
//取0到15
let num = Math.round(Math.random() * (15 - 0) + 0);//得到0-15的一个随机数
str += arr[num];//拼接字符串
}
return str;
}
window.onload=function(){
let res=getCode();
document.getElementById("code").innerText=res;
document.getElementById("linkbt").onclick=function(){
document.getElementById("code").innerText=res;
}
document.getElementById('Button1').onclick=function(){
let code=document.getElementById('code').innerText;
let inputCode=document.getElementById('inputCode').value;
//console.log(code);
//console.log(inputCode);
if(code!=inputCode){
alert('输入错误！');
document.getElementById('inputCode').value='';
return false;
}else{
location.href='https://blog.csdn.net/pipihan21';
}
}
}
</script>
</body>
</html>
効果
百度の検索データ
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度搜索数据</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.box {
width: 300px;
margin: 200px auto 0;
}
#input-txt {
height: 30px;
width: 200px;
border: 1px solid #ddd;
outline-color: aqua;
}
#search {
/* color: white; */
/* background-color: black; */
margin-left: 10px;
border-radius: 5px;
border: none;
height: 30px;
width: 50px;
}
.show {
width: 202px;
height: 300px;
color: #000;
border: 1px solid #ddd;
display: none;
padding: 3px;
}
.box .show p{
color: red;
font-size: 13px;
text-align: left;
}
</style>
</head>
<body>
<div class="box">
<input type="text" id="input-txt" placeholder="请输入搜索数据">
<button id="search" type="submit">搜索</button>
<div class="show" id="show">
<p>哈哈哈</p>
</div>
</div>
<script>
'user strict';
let arr = ['中国居民存款破纪录', '致敬！灾难中的中国逆行者', '社保缴费满15年就可以不缴了吗？', '科学家研发出男性避孕药', '高启强为什么解领带擦玻璃', '吴刚说最想演的角色是高启强','我是大帅哥'];
//先完成展示区域的显示或隐藏
let input = document.getElementById('input-txt');
let show = document.getElementById('show');
input.onkeyup = function() {
show.style.display = 'block';
//匹配数据
let str = '';
arr.forEach((item) => {
//匹配有指定数据的字符串
let res = item.indexOf(input.value);
if (res != -1) {
str += '<p>' + item + '</p>';
}
})
// console.log(str);
if(!input.value||!str){
show.innerHTML='<p>暂无结果！</p>';
}else{
show.innerHTML = str; //将代码块嵌入到html中显示
}
}
input.onblur = function() {
show.style.display = 'none';
input.value = '';
}
</script>
</body>
</html>
効果
タブ関数
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab选项卡功能</title>
<style type="text/css">
body,
ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
display: flex;
}
ul li {
width: 50px;
margin-left: 20px;
text-align: center;
border: 5px solid #ddd;
cursor: default;
background-color: rgba(0, 0, 0, 0.5);
}
img {
width: 200px;
height: 200px;
display: none;
margin-left: 20px;
}
</style>
</head>
<body>
<ul>
<li>猫</li>
<li>狗</li>
<li>老虎</li>
<li>狮子</li>
</ul>
<div>
<img src="img/cat.webp" alt="" style="display: block;">
<img src="img/dog.webp" alt="">
<img src="img/tigger.webp" alt="">
<img src="img/lion.webp" alt="">
</div>
<script type="text/javascript">
'user strict';
let li = document.getElementsByTagName('li');
let img = document.getElementsByTagName('img');
for (let i = 0; i < li.length; ++i) {
// 先进行元素数组下标设置
li[i].index = i;
//鼠标移入背景变色
li[i].onmouseover = function() {
li[i].style.backgroundColor = 'yellow';
console.log(this.index);
for(let j=0;j<img.length;++j){
img[j].style.display='none';
}
img[this.index].style.display='block';
}
//鼠标移出背景色还原
li[i].onmouseout = function() {
li[i].style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
}
}
</script>
</body>
</html>
効果
チェックボックスの選択効果
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>勾选框选择效果</title>
</head>
<body>
<form action="">
<p><input type="checkbox" name="" id="">郭子晗</p>
<p><input type="checkbox" name="" id="">赵四</p>
<p><input type="checkbox" name="" id="">小沈阳</p>
<p><input type="checkbox" name="" id="">宋小宝</p>
</form>
<button onclick="getAll(0)">全选</button>
<button onclick="getAll(1)">全不选</button>
<button onclick="getAll(2)">反选</button>
<script>
'user strict';
let but = document.getElementsByTagName('button');
let input = document.getElementsByTagName('input');
//封装函数
function getAll(num){
for (let i = 0; i < input.length; ++i) {
if(num===0){
//全选
input[i].checked = true;
}
else if(num===1){
//全不选
input[i].checked = false;
}
else{
//反选
input[i].checked = !input[i].checked;
}
}
}
</script>
</body>
</html>
効果
