目录
邮箱控件
html
<!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>
<!-- 提供用户输入邮箱的文本框 -->
<input type="text" class="emailInput" list="list">
<!-- 显示常用邮箱的后缀 -->
<datalist id="list" class="emailList">
<option value=""></option>
</datalist>
<!-- 导入自定义的js文件 -->
<script src="./js/emailController.js"></script>
</body>
</html>js
//邮箱插件：自动提供常见的邮箱后缀
window.onload = function(){
//创建一个数组保存常见邮箱的后缀
let emailArray = new Array(5);
emailArray[0] = "@qq.com";
emailArray[1] = "@163.com";
emailArray[2] = "@126.com";
emailArray[3] = "@gmail.com";
emailArray[4] = "@sina.com";
//获得class属性为emailList的元素
let emailList = document.querySelector(".emailList");
// 使用循环遍历数组，将数组中的元素添加到dataList控件中
for(let i = 0 ; i<emailArray.length;i++){
//创建一个option元素
let opt =document.createElement('option');
opt.innerHTML = emailArray[i];
//设置option元素的属性
opt.value = emailArray[i];
//将创建的option对象插入到dataList控件中
emailList.append(opt);
}
//获得页面中class属性为emailInput的文本框
let emailInput = document.querySelector('.emailInput');
//为文本框设置键盘按键抬起事件
emailInput.onkeyup = function(event){
// console.log(event.keyCode);
//获得用户在文本框输入的数据
let input = emailInput.value.trim();
//如果用户输入的内容
if(input.indexOf('@')!= -1){
return;
}
//获得dataList控件中所有的内容
let optArray = emailList.getElementsByTagName('option');
if(optArray != null && optArray.length >0){
//移除dataList控件中所有的option元素
for(let i = optArray.length - 1 ; i >=0 ; i--){
//移除控件中的子元素
emailList.removeChild(optArray[i]);
}
}
//将用户输入的值+常用邮箱的后缀，重新添加到dataList控件中
for (let i = 0; i < emailArray.length; i++) {
//创建一个option元素
let opt = document.createElement('option');
opt.innerHTML = input + emailArray[i];
//设置option元素的属性
opt.value = input + emailArray[i];
//将创建的option对象插入到dataList控件中
emailList.append(opt);
}
}
}登录验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
color: #ff0000;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<table>
<tr>
<td>用户姓名：</td>
<td><input type="text" class="userName"><span class="error1">*</span></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" class="userPwd"><span class="error2">*</span></td>
</tr>
<tr>
<td colspan="2">
<button type="submit">登录</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
<script>
window.onload = function(){
//获得当前页面的form
let form = document.querySelector('form');
//设置form的表单提交事件
form.onsubmit = function(){
// alert("提交");
let userName = form.querySelector('.userName');
// alert(userName.value);
if(userName.value.trim()==''){
alert('用户姓名不能为空');
//设置焦点
userName.focus();
//阻止表单提交
return false;
}
let userPwd = form.querySelector('.userPwd');
if(userPwd.value.trim()==''){
alert('密码不能为空');
return false;
}
}
}
</script>
</body>
</html>时钟表
h5+js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="myClock"></p>
<button type="button" class="stop">停止</button>
<button type="button" class="start">开始</button>
<!-- 导入自定义的js文件 -->
<script src="./js/DateTimeUtil.js"></script>
<script>
window.onload = function(){
//获得当前页面中class属性myClock的元素
let clock = document.querySelector('.myClock');
//获得停止按钮
let stop = document.querySelector('.stop');
//获得启动按钮
let start = document.querySelector('.start');
let curTime = function(){
let time = formatTime(new Date());
clock.innerHTML = time;
}
let timer = window.setInterval(curTime,1000);
//设置停止按钮的单机事件
stop.onclick = function(){
//结束计时器
window.clearInterval(timer);
timer = null;
}
//设置启动按钮的单机事件
start.onclick = function(){
if(timer == null){
timer = window.setInterval(curTime,1000);
}
}
}
</script>
</body>
</html>js--->时间工具
/**
* 将日期Date类型的值格式化为YYYY-MM-DD的字符串
* @param {需要格式化的日期} date
*/
function formatDate(date) {
if (date === undefined || date === null || date === '') {
return '';
}
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
let d = date.getDate();
d = d < 10 ? '0' + d : d;
return y + '-' + m + '-' + d;
}
/**
* 将Date类型的值，格式化为HH:MM:SS格式的字符串
* @param {需要格式化的时间} time
*/
function formatTime(time) {
if (time === undefined || time === null || time === '') {
return '';
}
let h = time.getHours();
let m = time.getMinutes();
m = m < 10 ? '0' + m : m;
let s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
/**
* 将Date类型的值，格式化为YYYY-MM-DD HH:MM:SS格式的字符串
* @param {需要格式化的日期+时间} dateTime
* @returns 如果dateTime合法，返回YYYY-MM-DD HH:MM:SS格式的字符串，否则返回空
*/
function formatDateTime(dateTime){
if(dateTime === undefined || dateTime === null || dateTime ===''){
return '';
}
return formatDate(dateTime) + ' ' + formatTime(dateTime);
}全选复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" class="selectItem">
</td>
<td>
XXX第1级
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectItem">
</td>
<td>
XXX第2级
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectItem">
</td>
<td>
XXX第3级
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectItem">
</td>
<td>
XXX第4级
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectItem">
</td>
<td>
XXX第5级
</td>
</tr>
<!-- <tr>
<td colspan="2">
<button type="button" class="btn1" onclick="fun(true)">全部选中</button>
<button type="button" class="btn2" onclick="fun(false)">全部取消</button>
</td>
</tr> -->
<tr>
<td >
<input type="checkbox" class="selectAll">
</td>
<td>
全选
</td>
</tr>
</table>
<script>
window.onload = function(){
//获得class属性为selectAll的checkBox
let selectAll = document.querySelector('.selectAll');
//获得多个class属性为selectItem的checkBox
let selectArray = document.querySelectorAll('.selectItem');
//设置 全选 复选按钮的单机事件
selectAll.onclick = function(){
for(let i = 0 ; i < selectArray.length ; i++){
selectArray[i].checked = selectAll.checked;
}
}
let isSelect = function(){
//获得被选中复选按钮的数量
let selectCheckbox = document.querySelectorAll('.selectItem:checked');
// alert(selectCheckbox.length);
//根据选中数量 和 复选框的数量进行相比
selectAll.checked = selectCheckbox.length === selectArray.length;
}
//为其他的复选按钮设置单击事件
for(let i = 0 ; i< selectArray.length ; i++){
selectArray[i].addEventListener('click',isSelect);
}
}
</script>
<!-- <script>
let checkArray = document.getElementsByTagName('input');
function fun(value) {
for (let i = 0; i < checkArray.length; i++) {
checkArray[i].checked = value;
}
}
</script> -->
<!-- <script>
window.onload = function(){
//获得页面中所有的checkBox
let checkArray = document.getElementsByTagName('input');
// alert(checkArray.length);
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
//设置全部选中按钮的单击事件
btn1.onclick = function(){
for(let i = 0 ; i < checkArray.length ; i++){
checkArray[i].checked = true;
}
}
//设置全部取消按钮的单击事件
btn2.onclick = function () {
for (let i = 0; i < checkArray.length; i++) {
checkArray[i].checked = false;
}
}
}
</script> -->
</body>
</html>轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.lunbo{
width: 1226px;
height: 460px;
margin: 0 auto;
position: relative;
}
.lunbo img{
position: absolute;
left: 0;
top: 0;
/* 隐藏 */
display: none;
}
</style>
</head>
<body>
<div class="lunbo">
<img src="./images/lunbo1.jpg" alt="">
<img src="./images/lunbo2.jpg" alt="">
<img src="./images/lunbo3.jpg" alt="">
<img src="./images/lunbo4.jpg" alt="">
<img src="./images/lunbo5.jpg" alt="">
</div>
<script>
window.onload = function(){
//获得所有的轮播图片
let imageArray = document.querySelectorAll('.lunbo img');
// let imageArray = document.querySelector('.lunbo').getElementsByTagName('img');
// alert(imageArray.length);
//设置当前显示图片的下标（默认第一张）
let index = 0;
//获得最后一张图片的下标
let lastIndex = imageArray.length-1;
//默认显示第一张图片
imageArray[index].style.display = 'block';
window.setInterval(function(){
//隐藏上一张图片
imageArray[index].style.display = 'none';
index++;
if(index > lastIndex){
index = 0;
}
// for(let i = 0 ; <imageArray.length ; i++){
// imageArray[i].style.display = 'none';
// }
// 显示下一张图片
imageArray[index].style.display = 'block';
},2000);
}
</script>
</body>
</html>下拉框(展示隐藏信息)
h5页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 导入css文件 -->
<link rel="stylesheet" href="./framework/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="./framework/reset.css">
<link rel="stylesheet" href="./framework/icon.css">
<!-- 导入自定义的css文件 -->
<link rel="stylesheet" href="./css/payment.css">
<title>饿了么 在线支付</title>
</head>
<body>
<!-- --------------------总容器的开始-------------------- -->
<div class="wrapper">
<!-- --------------------头部开始的开始-------------------- -->
<header>
<p>在线支付</p>
</header>
<!-- --------------------头部开始的结束-------------------- -->
<!-- 订单信息的开始 -->
<h3>订单信息：</h3>
<div class="order-info">
<p>
万家饺子(软件园E18店)
<i class="fa fa-caret-down"></i>
</p>
<p >
¥49
</p>
</div>
<!-- 订单信息的结束 -->
<!-- 订单明细的开始 -->
<ul class="order-detailed">
<li>
<p>纯肉鲜肉(水饺) x 2</p>
<p>¥15</p>
</li>
<li>
<p>玉米鲜肉(水饺) x 2</p>
<p>¥16</p>
</li>
<li>
<p>配送费</p>
<p>¥3</p>
</li>
</ul>
<!-- 订单明细的结束 -->
<!-- 支付方式的开始 -->
<ul class="pay-type">
<li>
<img src="./img/alipay.png" >
<i class="fa fa-check-circle"></i>
</li>
<li>
<img src="./img/wechat.png" >
<!-- <i class="fa fa-check-circle" ></i> -->
</li>
</ul>
<div class="pay-button">
<button>确认支付</button>
</div>
<!-- 支付方式的结束 -->
<!-- --------------------页脚的开始-------------------- -->
<div style="height: 14vw;"></div>
<footer>
<ul>
<li onclick="window.location.href='./index.html'">
<i class="fa fa-home"></i>
<p>首页</p>
</li>
<li onclick="window.location.href='./index.html'">
<i class="fa fa-compass"></i>
<p>发现</p>
</li>
<li onclick="window.location.href='./orderList.html'">
<i class="fa fa-file-text-o"></i>
<p>订单</p>
</li>
<li onclick="window.location.href='./index.html'">
<i class="fa fa-user-o"></i>
<p>我的</p>
</li>
</ul>
</footer>
<!-- --------------------页脚的结束-------------------- -->
</div>
<!-- --------------------总容器的结束-------------------- -->
<script src="./js/payment.js"></script>
</body>
</html>js部分
window.onload = function(){
//获得向下箭头
let down = document.querySelector('.fa-caret-down');
//获得订单明细div
let detail = document.querySelector('.order-detailed');
//隐藏订单明细的div
detail.style.display = 'none';
//设置向下箭头的单机事件
down.onclick = function(){
if (detail.style.display === 'none'){
detail.style.display = 'block';
down.setAttribute('class','fa fa-caret-up')
}else{
detail.style.display = 'none';
down.setAttribute('class', 'fa fa-caret-down')
}
}
}展示：
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
