前端
文章平均质量分 58
看到代码头都是大的
不畏往事忧 只愿余生笑
展开
-
身份证基本数据获取及验证
身份证基本数据获取及验证根据输入的身份证号码:1.点击“提交”按钮或按下键盘“Enter”键,判断输入的身份证号是否正确;2.在身份证输入正确的时候,获取身份证中基本信息填入表格中。所在省份的值从json文件中获取,若有详细市州、地区代码对照表,可对json数据进行完善后,获取更详细信息。效果如下代码架构如下代码如下index.html<!DOCTYPE html><html lang="en"><head> <meta char原创 2021-06-17 10:06:55 · 594 阅读 · 0 评论 -
网易云歌曲下载
前期准备1.所下载歌曲需网易云音乐有版权播放;2.由于未找到歌曲搜索相关API,故歌曲ID由网易云音乐地址栏获取。相关代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易云音乐下载</title></head><style> * { padding: 0;原创 2021-02-18 22:46:48 · 563 阅读 · 0 评论 -
js实现列表的新增与删除
实现效果如下:效果说明:1、在爱好分类中选择自己的爱好,点击“已完成选择”,将选中的爱好添加至“我的爱好”列表中;2、在我的爱好列表中,点击爱好后面的“x”,将爱好移除,实时记录当前我的爱好中的数据。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js实现列表的新增与删除</title></head&原创 2020-12-29 14:34:39 · 844 阅读 · 0 评论 -
原生js实现全选/反选效果
效果演示效果说明a.点击头部多选框,实现全选,全不选效果;b.当列表全部选中时,头部多选框为选中状态;c.当列表中存在一项未选中时,头部多选框不选中;d.选中商品时,点击下方“点击提交商品”按钮,显示当前选中商品名称;实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选反选</title></hea原创 2020-09-23 16:57:22 · 189 阅读 · 0 评论 -
js实现抽奖系统(可修改号码个数及抽奖次数)
效果截图:效果说明设置最大号码个数为90,抽奖次数无限制当输入格式不正确时,会设置一个默认的值(号码个数默认为90,抽奖次数默认为1)当输入无误时,点击提交,即可开始抽奖在抽奖过程中,可点击提交按钮重置号码个数及抽奖次数代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>抽奖系统的实现</title><原创 2020-09-20 16:21:50 · 2114 阅读 · 4 评论 -
js实现简易的抽奖系统
实现效果如下:效果说明:1、共有90个号码,在点击开始抽奖后,产生随机号码;2、点击停止后,显示最后一次产生的随机号码,作为幸运号码;3、在点击三次抽奖后,按钮内容显示为:次数已经用完,再点击时失效;4、效果图中号码为使用js生成的。由于涉及的代码量不多,故全部在index.html中,具体代码如下:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"原创 2020-08-16 10:58:43 · 1160 阅读 · 0 评论 -
js特效--移动的广告窗
效果图如下:效果说明:刷新页面时,广告窗默认按指定方向进行移动,在碰到浏览器边缘的时候,向相反的方法继续运动,当鼠标移动到广告窗上时,广告窗停止运动,当鼠标移开时,广告窗继续运动。在点击关闭按钮后,广告窗隐藏,1s后广告窗再次出现,第四次点击关闭的时候,广告窗彻底隐藏。代码如下:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t原创 2020-08-13 17:28:07 · 1032 阅读 · 1 评论 -
JS特效--静态广告弹窗
实现效果:效果说明:初始状态时,广告窗默认显示,点击关闭按钮后,广告窗隐藏,1s后广告窗再次出现,第四次点击关闭按钮的时候,广告窗彻底关闭。由于代码较少,故全部写在index.html中,index.html代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹窗</title></head><原创 2020-08-12 09:55:38 · 1244 阅读 · 1 评论 -
事件冒泡效果与阻止事件冒泡方法
事件冒泡效果演示:事件冒泡起因:元素本身与父元素绑定了同一事件(演示为单击事件)后,在自身的事件被触发后,父元素的事件也会默认被触发。到window或document层时,事件才会终止。由于代码较少,故全部都存放在index.html中,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡</title>原创 2020-07-22 14:26:10 · 318 阅读 · 0 评论 -
简单的JS特效-----验证登录名是否正确
效果说明:开始时,白框中显示为:Login Name,当鼠标移动到该字上时,该字往左上角移动,且出现输入框和提交按钮;当输入框为空时,点击提交按钮,输入框本身提示性话语修改为:“输入的登录名不能为空!!!”,且将字体修改为红色;当输入框存在内容时,点击提交按钮后,提交按钮会将整个空白区域占领,并获取输入框中的字符串,判定是否与设定的默认字符串一致,如果一致,将“submit”修改为:“验证成功!!!”,字体颜色修改为绿色,如果不一致,则将“submit”修改为:“验证失败!!!”,字体颜色修改为红色原创 2020-07-19 19:58:28 · 455 阅读 · 0 评论 -
原生js实现字符串拆串
演示效果如下:效果说明:当某个输入框不存在内容时,点击“确认”按钮后,提示出相应的错误信息,并将input框中的数据保留;当两个input框中均存在数据,点击“确认”按钮后,错误提示隐藏。由于涉及的代码并不多,所以为对其进行拆分(代码中,js有详细说明)。代码如下:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl原创 2020-07-19 15:00:39 · 323 阅读 · 1 评论 -
ECharts使用 -- 地图
项目说明:1.项目中的数据存储在:address.json文件中的,可能与实际存在差异;2.地图可以随着鼠标的滚动而缩小或放大,超出部分隐藏;3.如若有统计常住人口的API,将ajax中的请求地址进行更换,再对数据进行处理一下即可。效果图如下:项目结构如下:chinaMap.html<!DOCTYPE html><html lang="en"><...原创 2020-03-21 18:47:56 · 559 阅读 · 0 评论 -
jQuery实现左侧菜单栏
使用jQuery实现左侧菜单选项,根据选择的菜单,显示相应的内容,点击菜单目录的时候,第一次点击打开,第二次点击关闭,类似于事件反转。默认效果如下(默认状态下,二级菜单全部隐藏,内容为一级目录1下面的第一个):点击左侧的一级目录时,子目录会显示,以下是点击一级目录2之后的效果。再点击里面的具体子菜单时,右侧显示的内容也会随之改变。以下是点击2-1之后显示的效果。看了效果,是该上代码了...原创 2020-03-20 21:18:40 · 2348 阅读 · 3 评论 -
原生js实现懒加载与下拉加载更多
效果图如下:刚加载时: 加载结束:如果是你想要的效果,请继续往下阅读......项目结构图如下:json数据如下:在该json文件中,我只设计了图片的标题和图片的地址,标题在将鼠标移动到图片上,等待一会儿便会出现,图片地址使用的全部是网络图片。如有侵权,请联系本人,本人将以最快的速度删除(非商业)。话不多说,直接上代码:index...原创 2020-03-17 15:56:01 · 1672 阅读 · 3 评论 -
Vue中父子组件的传值
在该演示中,我主要注重传值的方式,没有复杂的功能。准备工作:第一步:新建两个vue文件。我建立的是:parent(父组件)与son(子组件)。第二步:在父组件中引入子组件。a.在父组件的script中,使用import引入子组件。import Son from './son'; // 命名随意,后面调用的时候使用的就是这里的名字// 在引用的时候一般不存在大写字母(自动转换成小写字母...原创 2020-03-16 20:51:20 · 655 阅读 · 1 评论 -
Swiper轮播凸显效果
实现效果如下:程序结构如下:话不多说,直接上代码:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>swiper运用</title> <link type="text/css"...原创 2020-03-16 15:41:31 · 635 阅读 · 0 评论 -
移动端开发的注意事项
1、把viewport设置成设备的实际像素在<head></head>标签中加入:<meta name="viewport" content="width=device-width,initial-scale=1">2、对CSS的样式进行分块的设计,分为两种情况:a.移动端单独使用一套资源时: 直接对css进行编写,在浏览器进行调试的时候切换至手机屏...原创 2019-10-23 11:28:31 · 196 阅读 · 0 评论 -
table表格相关
将table表格分成:标题、表头和内容三块。使用<caption> 表标题 </caption>设置表的标题。使用<thead> </thead>设置表的表头。使用<tbody> </tbody>设置表的内容。<table cellpadding="0" cellspacing="0" width="500px"...原创 2019-09-05 14:15:41 · 153 阅读 · 0 评论 -
jQuery实现分页效果(带下拉框)
index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>分页</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></s...原创 2019-09-14 14:42:18 · 1797 阅读 · 0 评论 -
无缝轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝轮播</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js">...原创 2019-09-18 17:21:06 · 181 阅读 · 0 评论 -
WampServer环境的搭建
WampServer是Windows Apache Mysql PHP集成安装环境。下面,我将对其的安装及使用进行详细介绍。WampServer的安装1、下载wampserve文件下载完成后,得到一个可执行文件:wampserver2.2e-php5.4.3-httpd2.2.22-mysql5.5.24-32b.exe,如下图所示:2、安装过程双击此文件,进入安装过程,如下图所示。...原创 2019-09-27 20:40:47 · 1170 阅读 · 0 评论 -
常见的鼠标事件
常见的鼠标事件有:单击、双击、鼠标移动上去、鼠标离开、鼠标按下、按下后松开、获取焦点、失去焦点等几类。每个事件的写法也都有很多种。为了方便,我是引入jQuery库进行操作的。1、单击写法1:直接使用<p onclick="alert("单击");">单击</p>写法2:js调用<p>单击</p><script>$('p'...原创 2019-09-05 11:03:31 · 6735 阅读 · 7 评论