前端小功能
关注
分享
扫一扫
Wrj6811
这个作者很懒，什么都没留下…
展开
-
在对象数组中，根据某个属性，删除树形结构中的某一项数据
在对象数组中，根据某个属性，删除树形结构中的某一项数据原创 2022-04-07 23:30:40 · 912 阅读 · 0 评论 -
圆形加载动画
页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>圆形加载动画</title> <link rel="stylesheet" type="text/css" href="../lib/css/loding.css"/> </head> <body> <input type="checkbo原创 2020-08-01 22:47:53 · 252 阅读 · 0 评论 -
网页动画气泡效果
打开网页，从网页底部生成一个一个的气泡，然后气泡上升到页面顶部消失。利用 setinterval定时器定时，每50毫秒生成一个气泡，然后设置他的样式，出现效果效果图：页面布局代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>网页动画气泡效果</title> <link rel="stylesheet" type="te.原创 2020-07-30 00:28:43 · 995 阅读 · 1 评论 -
在一段时间里面，生成随机数
应用场景：设置一个范围，然后随机显示出这个范围里面的数字。在一定的时间里面这个随机数不断的变化，直到时间结束，最终显示出最后的数字。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>随机数生成</title> <style type="text/css"> .box{ margin: 0; pa.原创 2020-07-25 23:15:02 · 459 阅读 · 0 评论 -
使用css实现手风琴菜单
效果图：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>手风琴菜单</title> <link rel="stylesheet" type="text/css" href="../lib/css/accordion.css"/> </head> <body> <di.原创 2020-07-24 22:35:31 · 326 阅读 · 0 评论 -
CSS实现简单的 hinge 动画
效果如下图所示：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HINGE</title> <link rel="stylesheet" type="text/css" href="../lib/css/hinge.css"/> </head> <body> <div .原创 2020-07-24 21:36:12 · 303 阅读 · 0 评论 -
火箭飞行动画效果实现
使用css动画实现火箭飞行的动画页面布局代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>火箭飞行动画</title> <link rel="stylesheet" type="text/css" href="../lib/css/rocket.css"/> </head> <body> <原创 2020-07-17 00:23:07 · 659 阅读 · 0 评论 -
404页面实现
页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>页面丢失了</title> <link rel="stylesheet" type="text/css" href="lib/css/404plane.css"/> </head> <body> <div class="error">.原创 2020-07-15 23:42:20 · 416 阅读 · 0 评论 -
实现一个动态的按钮，边框可以移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-27 22:18:16 · 561 阅读 · 0 评论 -
实现一个漂亮简单的登录界面
方法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="st...原创 2020-04-27 22:00:17 · 31134 阅读 · 17 评论 -
使用原生 js 实现 轮播图的效果
页面布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...原创 2020-04-19 23:41:02 · 197 阅读 · 1 评论 -
使用js实现鼠标拖动一个盒子移动的实例
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...原创 2020-04-11 17:43:02 · 2471 阅读 · 0 评论 -
输入一个时间，然后开始倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-07 15:03:49 · 1400 阅读 · 1 评论 -
使用js完成一个60秒倒计时，点击停止时就显示倒计时三个字
废话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...原创 2020-04-02 20:54:08 · 1832 阅读 · 0 评论 -
实现旋转木马的效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { perspective: 1500px; } section { ...原创 2020-03-23 16:58:07 · 764 阅读 · 0 评论 -
使用transform实现搜索框里面的三角形而不用字体图标
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { outline: none; width: 200px; ...原创 2020-03-20 16:36:58 · 308 阅读 · 0 评论 -
使用css实现一个小三角形
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .right{ height: 0; width: 0; border-style:...原创 2020-03-19 17:12:18 · 352 阅读 · 0 评论 -
简单的日历实现
index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>简单日历实现</title> <link rel="stylesheet" type="text/css" href="index.css"/> <...原创 2019-11-20 15:26:53 · 266 阅读 · 0 评论 -
实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）
类似于百度的搜索框，当输入一个字或词的时候，自动检索有没有该内容，有的话把输入的关键字标红代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百度搜索框设置</title> <style&...原创 2019-11-06 11:22:51 · 4553 阅读 · 0 评论 -
v-model制作简易计算器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-11-04 15:30:31 · 469 阅读 · 0 评论 -
animation 中的 steps() 的使用 做一个时钟
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ position: absolute; left: 50%; top: 1...原创 2019-10-16 23:19:59 · 298 阅读 · 0 评论 -
选择框批量选择
点击一个选择框，其他选择框全选或全不选。当下面的选择框全选上时，上面的选择框也选上，下面的选择框没有全选上时，上面的取消选择。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <...原创 2019-10-08 23:08:49 · 839 阅读 · 0 评论