当前位置： 首页 > news >正文

基础项目实用案例

news 2025/7/2 23:01:25

文章目录

    • 倒计时
    • 动态生成表格
    • 发布留言
    • 密码框验证
    • 模态框拖拽

倒计时

  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…...

编程日记 2023/9/14 21:34:16

sprngboot整合kabana

Spring Boot是一个开源框架&#xff0c;可以基于Spring框架快速开发和构建生产级别的应用程序。Kibana是一个可视化和交互式分析平台&#xff0c;用于检索和分析Elasticsearch集群中存储的数据。 下面是Spring Boot整合Kibana的基本步骤&#xff1a; 添加Maven依赖 在pom.xm…...

编程日记 2023/9/14 21:31:13

PostgreSQL 数据备份恢复

文章目录 PostgreSQL 备份方式SQL备份&#xff08;逻辑备份&#xff09;文件系统备份&#xff08;物理备份&#xff09;归档备份&#xff08;物理备份&#xff09; 逻辑备份&恢复物理备份&恢复&#xff08;全量&#xff09;备份恢复 物理备份&恢复&#xff08;某个…...

编程日记 2023/9/14 21:30:13

线性代数的本质(七)——特征值和特征向量

特征值和特征向量 本章特征值和特征向量的概念只在方阵的范畴内探讨。 相似矩阵 Grant&#xff1a;线性变换对应的矩阵依赖于所选择的基。 一般情况下&#xff0c;同一个线性变换在不同基下的矩阵不同。仍然以平面线性变换为例&#xff0c;Grant 选用标准坐标系下的基向量 i…...

编程日记 2023/9/14 21:27:10

c语言进阶部分详解（指针初阶）

大家好&#xff01;&#xff0c;前段时间一直在准备数学建模竞赛&#xff0c;现在也是忙完了。抓紧继续给大家带来c语言的内容。今天给大家带来指针初阶部分的讲解 当我们谈论C语言中的指针时&#xff0c;实际上是在讨论一种非常重要的概念&#xff0c;因为指针是C语言的核心之…...

编程日记 2023/9/14 21:25:08

Socks5代理IP在跨境电商与网络游戏中的网络安全应用

在数字化时代&#xff0c;跨境电商和网络游戏已成为全球网络世界中的两大热门领域。然而&#xff0c;这两者都面临着相似的网络安全挑战&#xff0c;需要高效的网络代理来解决。本文将讨论Socks5代理IP在跨境电商和网络游戏中的关键作用&#xff0c;以及如何通过这一技术增强网…...

编程日记 2023/9/14 21:23:06

Gin框架---基础综述

目录 一&#xff1a;经典入门案例二&#xff1a;请求参数2.1: API参数2.2: URL参数2.3: 表单参数 三&#xff1a; 响应参数四&#xff1a;数据解析和绑定4.1: JSON数据解析绑定4.2: FROM表单数据解析和绑定 五&#xff1a; 路由组六&#xff1a;异步处理七&#xff1a;中间件7.…...

编程日记 2023/9/14 21:21:04

排序算法-快速排序

属性 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法&#xff0c;其基本思想为&#xff1a;任取待排序元素序列中的某元 素作为基准值&#xff0c;按照该排序码将待排序集合分割成两子序列&#xff0c;左子序列中所有元素均小于基准值&#xff0c;右子序列中所有 …...

编程日记 2023/9/14 21:19:00

【Spring容器的启动过程】

Spring容器的启动过程 Spring 在初始化过程中有二个非常重要的步骤&#xff0c;容器的初始化与刷新。 初始化流程 如果想生成 bean 对象&#xff0c;那么就需要一个 beanFactory 工厂&#xff08;DefaultListableBeanFactory&#xff09;如果想让加了特定注解&#xff08;如 …...

编程日记 2023/9/14 21:16:59

普通二本+转专业学计算机是什么感受

目录 自我介绍转入前为什么转专业为什么转入机械专业 转入后转入后感受确定自学计算机自学计算机的时间分配 自我介绍 作者现在是大二,由于当时高考考砸了,分数在重本线左右,为了去一个稍微好一点的学校,于是填报了化学工程与工艺(并不是说这专业不好,只是填报化工更容易进这个…...

编程日记 2023/9/14 21:10:52

力扣1、两数之和

转到力扣 题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可…...

编程日记 2023/9/14 21:07:49

一百七十三、Flume——Flume写入HDFS后的诸多小文件问题

一、目的 在用Flume采集Kafka中的数据写入HDFS后&#xff0c;发现写入HDFS的不是每天一个文件&#xff0c;而是一个文件夹&#xff0c;里面有很多小文件&#xff0c;浪费namenode的宝贵资源 二、Flume的配置文件优化&#xff08;参考了其他博文&#xff09; &#xff08;一&a…...

编程日记 2023/9/14 21:04:46

Android.mk中C++使用

参考&#xff1a; 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…...

编程日记 2023/9/14 21:03:45

K8S：Pod概念、分类及相关的策略

文章目录 一.pod相关概念&#xff11;.Pod基础概念&#xff12;.Kubrenetes集群中Pod两种使用方式&#xff13;.pause容器的Pod中的所有容器共享的资源&#xff14;.kubernetes中的pause容器主要为每个容器提供功能&#xff1a;&#xff15;.Kubernetes设计这样的Pod概念和特殊…...

编程日记 2023/9/14 21:02:44

【Java杂谈】#1 【MCA JAVA后端架构师】

文章目录 巧用弱引用 解决 TreadLocal内存泄漏问题P5&#xff0c;P6&#xff0c;P7Spring 巧用弱引用 解决 TreadLocal内存泄漏问题 < Treadlocal > 本地调用框架使用&#xff08;Spring&#xff09; IOC&#xff0c;AOP注解transactional&#xff0c;自动支持事务处理…...

编程日记 2023/9/14 21:00:42

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 库 安装直接下载地址&#xf…...

编程日记 2023/9/14 20:59:41

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…...

编程日记 2023/9/14 20:56:38

大模型从入门到应用——LangChain：代理（Agents）-[工具包（Toolkit）]

分类目录&#xff1a;《大模型从入门到应用》总目录 工具包是工具的集合&#xff0c;这些工具被设计成一起用于特定的任务&#xff0c;并且具有方便的加载方法。常见的工具包如下&#xff1a; CSV代理JiraJSON代理OpenAPI代理自然语言APIPandas数据框架代理PlayWright浏览器工…...

编程日记 2023/9/14 20:51:33

VR全景算不算好的创业项目？有哪些特性？

现在是全民创业的时代&#xff0c;大家都在找创业项目&#xff0c;那么什么是好的创业项目呢&#xff1f;有人会问VR全景算不算创业好项目呢&#xff1f;一般情况下好的创业项目&#xff0c;发展前景和市场消费群体都是比较大的&#xff0c;市场需求大才能满足多数消费者的需求…...

编程日记 2023/9/14 20:48:27

Spring系列文章：Spring集成Log4j2⽇志框架、整合JUnit

一、集成Log4j2⽇志框架 从Spring5之后&#xff0c;Spring框架⽀持集成的⽇志框架是Log4j2.如何启⽤⽇志框架&#xff1a; 第⼀步&#xff1a;引⼊Log4j2的依赖 <!--log4j2的依赖--> <dependency><groupId>org.apache.logging.log4j</groupId><a…...

编程日记 2023/9/14 20:46:25

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/6/28 12:46:22

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/2 22:47:10

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/6/17 19:00:28

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/6/24 4:37:33

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/6/21 16:46:58

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/6/21 6:15:03

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/7/2 15:01:02

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/6/25 3:59:28

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/6/26 1:18:42