html css js做的在线签到例子

图片

代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>在线签到系统</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

padding: 20px;

}

.container {

background-color: white;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

padding: 20px;

width: 300px;

margin: auto;

text-align: center; /* 居中内容 */

}

input[type=text], input[type=email] {

width: 100%;

padding: 10px;

margin: 5px 0 15px 0;

border: 1px solid #b3b3b3;

border-radius: 5px;

box-sizing: border-box;

}

button {

background-color: #4d90fe; /* 蓝色背景 */

color: white;

padding: 10px 25px; /* 调整宽度 */

border: none;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background-color: #4787ed; /* 鼠标悬停时的蓝色 */

}

.alert {

color: red;

display: none;

}

table {

width: 100%;

margin-top: 20px;

border-collapse: collapse;

}

th, td {

border: 1px solid #ddd;

padding: 8px;

text-align: left;

border-radius: 5px;

}

th {

background-color: #4d90fe; /* 蓝色背景 */

color: white;

}

tr:nth-child(even) {

background-color: #f2f2f2;

}

</style>

<script>

function checkIn() {

var name = document.getElementById("name").value.trim(); // 去除前后空格

var email = document.getElementById("email").value.trim();

var alert = document.getElementById("alert");

var checkInList = document.getElementById("checkInList");

if (name === "" || email === "") {

alert.textContent = "姓名和邮箱不能为空!";

alert.style.display = "block";

return;

} else if (localStorage.getItem(email + "_checked")) { // 使用_email_checked避免冲突

alert.textContent = "您已签到过!";

alert.style.display = "block";

return;

} else {

localStorage.setItem(email + "_checked", "true");

alert.textContent = "签到成功!";

alert.style.display = "block";

// 添加签到记录到表格

var newRow = checkInList.insertRow(-1);

var nameCell = newRow.insertCell(0);

var emailCell = newRow.insertCell(1);

nameCell.textContent = name;

emailCell.textContent = email;

// 清空输入框

document.getElementById("name").value = "";

document.getElementById("email").value = "";

setTimeout(function() {

alert.style.display = "none";

}, 2000);

}

}

</script>

</head>

<body>

<div class="container">

<h2>在线签到</h2>

<input type="text" id="name" placeholder="姓名" required>

<input type="email" id="email" placeholder="邮箱" required>

<button οnclick="checkIn()">签到</button>

<p id="alert" class="alert"></p>

<h3>签到记录</h3>

<table>

<thead>

<tr>

<th>姓名</th>

<th>邮箱</th>

</tr>

</thead>

<tbody id="checkInList">

<!-- 签到记录将动态插入此处 -->

</tbody>

</table>

</div>

</body>

</html>

相关推荐
Myli_ing34 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风36 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave43 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
旭日猎鹰3 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚4 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单