基础项目实用案例
文章目录
- 倒计时
- 动态生成表格
- 发布留言
- 密码框验证
- 模态框拖拽
倒计时
function countDown(time) {var nowTime = +new Date();var inputTime = +new Date(time);var times = (inputTime - nowTime) / 1000;var d = parseInt(times / 60 / 60 / 24);d = d < 10 ? '0' + d : d;var h = parseInt(times / 60 / 60 % 24);h = h < 10 ? '0' + h : h;var m = parseInt(times / 60 % 60);m = m < 10 ? '0' + m : m;var s = parseInt(times % 60);s = s < 10 ? '0' + s : s;return d + '天' + h + '时' + m + '分' + s + '秒';}console.log(countDown('2023-3-19 21:00:00'));var date = new Date();console.log(date);
动态生成表格
<style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style>
</head><body><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>姓名</th><th>姓名</th></tr></thead><tbody><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody></table>
//先准备好数据var datas = [{name: '小王',subject: 'JavaScript',score: 100,scor: 100}, {name: '小张',subject: 'JavaScript',score: 98,scor: 100}, {name: '小赵',subject: 'JavaScript',score: 99,scor: 100}];//往tbody里创建行var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) {var tr = document.createElement('tr');tbody.appendChild(tr);//行里面创建单元格for (var k in datas[i]) {//创建单元格var td = document.createElement('td');td.innerHTML = datas[i][k];tr.appendChild(td);}//创建有删除的单元格var td = document.createElement('td');td.innerHTML = '<a href="javascript:;">删除</a>';tr.appendChild(td);}var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function () {tbody.removeChild(this.parentNode.parentNode);}}
发布留言
<style>li a {float: right;}</style>
</head><body><textarea name="" id="">123</textarea><button>发布</button><ul><li>123</li></ul><script>//获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');//注册事件btn.onclick = function () {//创建元素if (text.value == '') {alert('您没有输入内容');return false;} else {var li = document.createElement('li');//添加元素li.innerHTML = text.value + "<a href='javascript:'>删除</a>";ul.insertBefore(li, ul.children[0]);//删除元素var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function () {ul.removeChild(this.parentNode);}}}}
密码框验证
<style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(images\Snipaste_2023-03-19_11-22-17.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(images\Snipaste_2023-03-19_11-22-17.png);}.right {color: green;background-image: url(images\Snipaste_2023-03-19_11-22-17.png);}</style>
</head><body><div class="register"><input type="password" class="ipt"><p class="message">请输入6~16位密码</p></div><script>//获取元素var ipt = document.querySelector('.ipt');var message = document.querySelector('.message');//注册事件,失去焦点ipt.onblur = function () {if (this.value.length < 6 || this.value.length > 16) {message.className = 'message wrong'; //改变类名message.innerHTML = '您输入的位数不对';} else {message.className = 'message right'; //改变类名message.innerHTML = '正确输入';}}
模态框拖拽
<style>.login-header {width: 100%;text-align: center;height: 30px;font-size: 24px;line-height: 30px;}ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a {padding: 0px;margin: 0px;}.login {display: none;width: 512px;height: 280px;position: fixed;border: #ebebeb solid 1px;left: 50%;top: 50%;background: #ffffff;box-shadow: 0px 0px 20px #ddd;z-index: 9999;transform: translate(-50%, -50%);}.login-title {width: 100%;margin: 10px 0px 0px 0px;text-align: center;line-height: 40px;height: 40px;font-size: 18px;position: relative;cursor: move;}.login-input-content {margin-top: 20px;}.login-button {width: 50%;margin: 30px auto 0px auto;line-height: 40px;font-size: 14px;border: #ebebeb 1px solid;text-align: center;}.login-bg {display: none;width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;background: rgba(0, 0, 0, .3);}a {text-decoration: none;color: #000000;}.login-button a {display: block;}.login-input input.list-input {float: left;line-height: 35px;height: 35px;width: 350px;border: #ebebeb 1px solid;text-indent: 5px;}.login-input {overflow: hidden;margin: 0px 0px 20px 0px;}.login-input label {float: left;width: 90px;padding-right: 10px;text-align: right;line-height: 35px;height: 35px;font-size: 14px;}.login-title span {position: absolute;font-size: 12px;right: -20px;top: -30px;background: #ffffff;border: #ebebeb solid 1px;width: 40px;height: 40px;border-radius: 20px;}</style>
</head><body><div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div><div id="login" class="login"><div id="title" class="login-title">登录会员<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div><div class="login-input-content"><div class="login-input"><label>用户名：</label><input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"></div><div class="login-input"><label>登录密码：</label><input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"></div></div><div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div></div><!-- 遮盖层 --><div id="bg" class="login-bg"></div><script>// 1. 获取元素var login = document.querySelector('.login');var mask = document.querySelector('.login-bg');var link = document.querySelector('#link');var closeBtn = document.querySelector('#closeBtn');var title = document.querySelector('#title');// 2. 点击弹出层这个链接 link 让mask 和login 显示出来link.addEventListener('click', function() {mask.style.display = 'block';login.style.display = 'block';})// 3. 点击 closeBtn 就隐藏 mask 和 login closeBtn.addEventListener('click', function() {mask.style.display = 'none';login.style.display = 'none';})// 4. 开始拖拽// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标title.addEventListener('mousedown', function(e) {var x = e.pageX - login.offsetLeft;var y = e.pageY - login.offsetTop;// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值document.addEventListener('mousemove', move)function move(e) {login.style.left = e.pageX - x + 'px';login.style.top = e.pageY - y + 'px';}// (3) 鼠标弹起，就让鼠标移动事件移除document.addEventListener('mouseup', function() {document.removeEventListener('mousemove', move);})})</script>
相关文章：
基础项目实用案例
文章目录 倒计时动态生成表格发布留言密码框验证模态框拖拽 倒计时 function countDown(time) {var nowTime new Date();var inputTime new Date(time);var times (inputTime - nowTime) / 1000;var d parseInt(times / 60 / 60 / 24);d d < 10 ? 0 d : d;var h par…...
sprngboot整合kabana
Spring Boot是一个开源框架，可以基于Spring框架快速开发和构建生产级别的应用程序。Kibana是一个可视化和交互式分析平台，用于检索和分析Elasticsearch集群中存储的数据。 下面是Spring Boot整合Kibana的基本步骤： 添加Maven依赖 在pom.xm…...
PostgreSQL 数据备份恢复
文章目录 PostgreSQL 备份方式SQL备份（逻辑备份）文件系统备份（物理备份）归档备份（物理备份） 逻辑备份&恢复物理备份&恢复（全量）备份恢复 物理备份&恢复（某个…...
线性代数的本质(七)——特征值和特征向量
特征值和特征向量 本章特征值和特征向量的概念只在方阵的范畴内探讨。 相似矩阵 Grant：线性变换对应的矩阵依赖于所选择的基。 一般情况下，同一个线性变换在不同基下的矩阵不同。仍然以平面线性变换为例，Grant 选用标准坐标系下的基向量 i…...
c语言进阶部分详解（指针初阶）
大家好！，前段时间一直在准备数学建模竞赛，现在也是忙完了。抓紧继续给大家带来c语言的内容。今天给大家带来指针初阶部分的讲解 当我们谈论C语言中的指针时，实际上是在讨论一种非常重要的概念，因为指针是C语言的核心之…...
Socks5代理IP在跨境电商与网络游戏中的网络安全应用
在数字化时代，跨境电商和网络游戏已成为全球网络世界中的两大热门领域。然而，这两者都面临着相似的网络安全挑战，需要高效的网络代理来解决。本文将讨论Socks5代理IP在跨境电商和网络游戏中的关键作用，以及如何通过这一技术增强网…...
Gin框架---基础综述
目录 一：经典入门案例二：请求参数2.1: API参数2.2: URL参数2.3: 表单参数 三： 响应参数四：数据解析和绑定4.1: JSON数据解析绑定4.2: FROM表单数据解析和绑定 五： 路由组六：异步处理七：中间件7.…...
排序算法-快速排序
属性 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法，其基本思想为：任取待排序元素序列中的某元 素作为基准值，按照该排序码将待排序集合分割成两子序列，左子序列中所有元素均小于基准值，右子序列中所有 …...
【Spring容器的启动过程】
Spring容器的启动过程 Spring 在初始化过程中有二个非常重要的步骤，容器的初始化与刷新。 初始化流程 如果想生成 bean 对象，那么就需要一个 beanFactory 工厂（DefaultListableBeanFactory）如果想让加了特定注解（如 …...
普通二本+转专业学计算机是什么感受
目录 自我介绍转入前为什么转专业为什么转入机械专业 转入后转入后感受确定自学计算机自学计算机的时间分配 自我介绍 作者现在是大二,由于当时高考考砸了,分数在重本线左右,为了去一个稍微好一点的学校,于是填报了化学工程与工艺(并不是说这专业不好,只是填报化工更容易进这个…...
力扣1、两数之和
转到力扣 题目 给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。 你可…...
一百七十三、Flume——Flume写入HDFS后的诸多小文件问题
一、目的 在用Flume采集Kafka中的数据写入HDFS后，发现写入HDFS的不是每天一个文件，而是一个文件夹，里面有很多小文件，浪费namenode的宝贵资源 二、Flume的配置文件优化（参考了其他博文） （一&a…...
Android.mk中C++使用
参考： https://gerrit.twrp.me/c/android_bootable_recovery//4366/1/Android.mk ifeq ($(BOARD_USES_RECOVERY_AS_BOOT), true) LOCAL_CFLAGS -DBOARD_USES_RECOVERY_AS_BOOT endif ifeq ($(BOARD_BUILD_SYSTEM_ROOT_IMAGE), true) LOCAL_CFLAGS -DBOA…...
K8S：Pod概念、分类及相关的策略
文章目录 一.pod相关概念１.Pod基础概念２.Kubrenetes集群中Pod两种使用方式３.pause容器的Pod中的所有容器共享的资源４.kubernetes中的pause容器主要为每个容器提供功能：５.Kubernetes设计这样的Pod概念和特殊…...
【Java杂谈】#1 【MCA JAVA后端架构师】
文章目录 巧用弱引用 解决 TreadLocal内存泄漏问题P5，P6，P7Spring 巧用弱引用 解决 TreadLocal内存泄漏问题 < Treadlocal > 本地调用框架使用（Spring） IOC，AOP注解transactional，自动支持事务处理…...
Vue3路由
文章目录 Vue3路由1. 载入vue-router 库2. 实例2.1 Vue.js vue-router 实现单页应用2.2 router-link创建链接2.3 router-view显示与url对应组件2.4 <router-link> 相关属性 Vue3路由 1. 载入vue-router 库 Vue.js 路由需要载入vue-router 库 安装直接下载地址…...
Android Studio的笔记--aidl实现和调用
android AIDL接口使用 aidl实现新建aidl实现工程build.gradleproguard-rules.pro增加aidl文件 增加aidl实现aidl实现服务打开aidl服务 aidl使用新建aidl使用工程增加aidl文件使用aidl方法 相关回显 aidl实现 新建aidl实现工程 新建一个工程。工程名testaidl。包名com.lxh.tes…...
大模型从入门到应用——LangChain：代理（Agents）-[工具包（Toolkit）]
分类目录：《大模型从入门到应用》总目录 工具包是工具的集合，这些工具被设计成一起用于特定的任务，并且具有方便的加载方法。常见的工具包如下： CSV代理JiraJSON代理OpenAPI代理自然语言APIPandas数据框架代理PlayWright浏览器工…...
VR全景算不算好的创业项目？有哪些特性？
现在是全民创业的时代，大家都在找创业项目，那么什么是好的创业项目呢？有人会问VR全景算不算创业好项目呢？一般情况下好的创业项目，发展前景和市场消费群体都是比较大的，市场需求大才能满足多数消费者的需求…...
Spring系列文章：Spring集成Log4j2⽇志框架、整合JUnit
一、集成Log4j2⽇志框架 从Spring5之后，Spring框架⽀持集成的⽇志框架是Log4j2.如何启⽤⽇志框架： 第⼀步：引⼊Log4j2的依赖 <!--log4j2的依赖--> <dependency><groupId>org.apache.logging.log4j</groupId><a…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
C#学习第29天：表达式树（Expression Trees）
目录 什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...