20个JavaScript开发案列(一)
二十个JavaScript实例,每天五个,四天更完,敬请期待!期间还会出JavaScript的复习回顾,学完这些开始搞毕设前端,也会更新到此专栏!
o( ̄▽ ̄)ブ φ(゜▽゜*)♪ (p≧w≦q)
支付十秒倒计时
代码实现
demo1.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>
demo2.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>
效果
tab选项卡功能
代码实现
<!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>
效果
扫描二维码关注公众号,回复:
16773413 查看本文章