前端案例

【前端案例】09 - 实时显示文本框输入内容

实时显示文本框内容1样式设计文本超出盒子宽度使用省略号代替。/*文字在一行显示当超出时使用省略号替换*/overflow:hidden;white-space:nowrap;text-overflow:ellipsis;这里设计时需要多加一个容器盒子，进行缓冲，因为在文本超出盒子宽度使用省略号代替中使用了overflow:hidden导致下面的小三角被隐藏了。所以添加一个容器盒子。将内容与小三角区

itlu·2024-02-15 07:26

JavaEE学习日志(四十): CSS选择器，CSS属性

JavaEE学习路线（文章总汇）JavaEE学习日志（四十）CSSCSS选择器基本选择器属性选择器包含选择器伪元素选择器CSS属性边框属性转换属性字体属性背景属性浮动属性盒子模型注册前端案例CSSCSS

隔叶听风·2024-02-13 09:48

前端案例：基于el-table和el-pagination实现数据的分页效果

首先使用el-table(表格)和el-pagination(分页)组件需要npm下载ElementUI组件库，下载安装方式参见官网：Element-Theworld’smostpopularVueUIframeworkElement，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库[这里是图片001]https://element.eleme.cn/#/zh-CN/compon

m0_67401746·2024-02-03 21:55

GitHub工作流的使用笔记

文章目录前言1.怎么用2.怎么写前端案例1：自动打包到新分支前端案例2：自动打包推送到gitee的build分支案例3：暂时略前言有些东西真的就是要不断的试错不断地试错才能摸索到一点点，就是摸索到凌晨两三点第二天要

仰晨556·2024-01-31 08:09

前端案例—antd 下拉框组件Select 实现搜索功能

前端案例—antd下拉框组件Select实现搜索功能。默认对option的value进行搜索，optionFilterProp=“children”表示对内嵌内容进行搜索。

凭栏听雨客·2024-01-30 12:19

【前端案例】10 - 案例：5秒后关闭 ad

关闭ad该案例利用的就是JavaScript的定时器setTimeout();实现。//5.秒中之后自动关闭广告letad=document.querySelector('.ad');letcloseAd=setTimeout(function(){ad.style.display='none';},5000);

itlu·2024-01-30 11:13

【前端案例】14 - 案例：获取浏览器地址栏中的参数

获取地址栏中的参数登录界面：登录页面用户名:登录首页：欢迎您!letcontainer=document.querySelector('.container');//使用location对象获取地址栏中的search数据letsearch=location.search;//将前面的问号去掉使用substr截取substr(截取开始的位置,截取长度)如果截取长豆未设置表示截取到末尾search=s

itlu·2024-01-24 03:47

web前端案例之星星点灯

使用HTML+CSS+Javascript制作——当鼠标点击屏幕时，出现星星闪烁的效果实现代码：*{margin:0;padding:0;}document.body.style.backgroundColor="#000"document.onclick=function(event){letimg=document.createElement("img")img.src="0.gif"img.

周湘zx·2024-01-11 18:28

web前端案例之抽奖

使用HTML+Javascript完成抽奖案例*{margin:0;padding:0;}functiondiv_click(event){console.log(event)}letdiv=document.querySelector("#container")div.style.width=400+"px"div.style.height=400+"px"div.style.border="1

周湘zx·2024-01-11 18:56

【前端案例】11 - 案例：倒计时

倒计时注意最好采用封装函数的方式，这样可以在执行定时器之前先调用一次这个函数，防止刚开始刷新时有时间空白问题。.container{width:200px;margin:100pxauto;}.containerspan{float:left;width:30px;height:30px;line-height:30px;margin-right:10px;color:#fff;text-alig

itlu·2024-01-10 03:14

微信小程序——调节手机屏幕亮度案例分享

当前专栏：前端案例分享专栏✨特色专栏：国学周更-心性养成之路本文内容：微信小程序——调节手机屏幕亮度案例分享文章目录1、知识小结2、案例分享1、知识小结使用wx.setScreenBrightness(

Java Fans·2024-01-09 21:50

【前端案例】13 - 案例：5秒后跳转页面

5秒后跳转页面实现5秒倒计时后页面跳转效果：注意将执行过程封装为一个函数，在设置定时器前先执行一下该函数。点击点我开始letbtn=document.querySelector('button');letclickStart=document.querySelector('.clickStart');letcontent=document.querySelector('.content');let

itlu·2024-01-02 19:37

前端工程化及其实践1

前端工程化及其实践1前端工程化及其实践又名：写毕设到企业级前端（第一天）前端工程化简介目录前端工程化及其实践前端工程化简介传统和现代化开发的案例对比传统前端案例现代化前端现代前端案例现代化项目结构举例vue

Wade_Crab·2024-01-01 10:59

【前端案例】17 - 案例：仿淘宝固定右侧侧边栏

原先侧边栏是绝对定位；当页面滚动到一定位置，侧边栏改为固定定位；页面继续滚动，会让返回顶部显示出来。案例分析:需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document；滚动到某个位置，就是判断页面被卷去的上部值；页面被卷去的头部：可以通过window.pageYOffset获得如果是被卷去的左侧window.pageXOffset；注意，元素被卷去的头部是element.scr

itlu·2023-12-25 09:00

前端案例—antd的表单项默认值提交时没有生效

前端案例—antd的表单项默认值提交时没有生效我想要给“规则应用时间”默认选中第一个选项，于是使用defaultValue属性，但是这样在onFinish提交的时候并不会生效。

凭栏听雨客·2023-12-23 13:56

前端案例-Select组件在编辑回显时如何将选不到的id回显为其他颜色

前端案例-Select组件在编辑回显时如何将选不到的id回显为其他颜色场景描述：一个酒店房间里面可以有很多产品的床单。

凭栏听雨客·2023-12-23 13:26

前端案例—antdDesign的Select多选框组件加上全选功能

前端案例—antdDesign的Select多选框组件加上全选功能。实现效果如下：Select组件里有这个属性，可以利用这个对下拉菜单进行自定义。

凭栏听雨客·2023-12-23 13:55

微前端实战：打造高效、灵活的前端应用架构

文章目录一、微前端简介二、微前端的优势1.高度模块化2.独立部署3.易于扩展4.技术栈无关5.独立升级三、微前端的原理四、微前端案例思路《微前端实战》编辑推荐内容简介作者简介目录前言/序言随着互联网行业的快速发展

程序边界·2023-12-04 07:47

前端案例-css实现ul中对li进行换行

场景描述：我想要实现，在展示的item个数少于4个的时候，则排成一行，并且均分（比如说有3个，则每个的宽度为33.3%），如果item个数大于4，则进行换行。效果如下：方法一：使用flex进行换行ul{display:flex;//用于换行flex-wrap:wrap;list-style-type:none;}li{flex-basis:25%;/*每个项的基础宽度为20%，即每行显示5列*/}

凭栏听雨客·2023-11-14 08:26

[前端案例]用HTML、JS、CSS实现一个进度条，加上动画效果

进度条最终效果如下，上面是一个进度条进度，进度通过线条颜色来控制：蓝色表示已达到该进度，黑色表示未达到；下方是两个按钮来控制整体进度条的进度：点击Prev按钮减少进度，Next来增加进度；首先创建一个index.html，补充页面中的标签元素Progressstep1234PrevNextCSS样式在style.css中补充页面样式以及各标签布局，源于便捷性页面中大部分标都采用flex布局方式，:

程序员大飞1·2023-10-06 22:44

【Web前端】彼岸の花——网上花店(网页制作)

本篇博客我们来做一个好看又简单的前端案例——彼岸的花网页界面。

Brant_zero2022·2023-09-06 09:29

【前端案例】 18 - 自定义鼠标图标

自定义鼠标图标样式div{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:300px;height:300px;cursor:url(../image/cursor_icon.ico),default;border:1pxsolid#ccc;}注意这里的属性使用逗号分隔在vue中使用ico图标的时候遇到

itlu·2023-08-28 19:23

Vue前端案例

学员信息表table{width:500px;/*height:200px;*/border:1pxsolid#ccc;}tabletrtd{text-align:center;}学员信息表姓名:年龄:性别:学籍:添加姓名年龄性别学籍操作{{item.name}}{{item.age}}{{item.sex}}{{item.sheng}}删除newVue({el:'#app',data:{stus

unicorn31·2023-08-12 07:13

【前端案例】原生js实现一个开关按钮，并记住用户选择

目标是创建一个开关按钮，并且能够记住用户的选择。主要步骤如下：使用CSS创建开关按钮的样式，包括按钮本身和滑块的样式。在HTML中创建一个开关按钮，包括一个隐藏的输入框和一个滑块。使用JavaScript获取之前的开关状态（如果存在），并设置开关的状态。当开关被点击时，使用JavaScript切换状态并保存到本地存储。

且陶陶º·2023-07-31 13:22

前端案例分享（一）：CSS+JS实现流星雨动画

前端案例分享（一）：CSS+JS实现流星雨动画目录引言1、效果图2、源码3、案例解析4、小问题5、结语引言平常会做一些有意思的小案例练手，通常都会发到codepen上，但是codepen不能写分析。

Lucky_wangtao·2023-07-28 08:28

JavaScript案例分享：让前端开发者抓狂的按钮

前言我分享一个前端案例，代码来源我不确定，可能是我某个编程技术交流群的群友分享的。

正经人_____·2023-06-15 23:05

【前端案例】 22 - 案例：移动端拖动元素

案例演示移动端拖拽元素功能分析touchstart、touchmove、touchend可以实现拖动元素；但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY；移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离；手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置。拖动元素三步曲：触摸元素touchsta

itlu·2023-04-20 14:23

前端学习第二站——JavaScript

Function2.3.2数组Array2.3.3对象Object⭐️⭐️3.运算符和表达式1)===2)||4)...5)[]{}4.控制语句1)forin2)forof3)trycatch5.API5.1环境准备5.2前端案例

芝麻干·2023-01-16 07:03

JavaScript—实现手风琴画册

当前专栏：前端案例分享专栏✨特色专栏：国学周更-心性养成之路本文内容：JavaScript—实现手风琴画册更多内容点击 1、CSS中iconfont彩色图标使用详解【本文目录】项目效果涉及功能项目分析项目需求项目实现处理错误共性问题技术实现项目效果图片分

Java Fans·2022-12-12 07:37

JS新年倒计时

当前专栏：前端案例分享专栏✨特色专栏：国学周更-心性养成之路本文内容：JS新年倒计时更多内容点击 JavaScript—实现手风琴画册不知不觉，2022年就进入了倒计时！

Java Fans·2022-12-12 07:01

【jQuery动画】停止动画、淡入淡出、自定义动画

‍哈喽大家好，本次是jQuery案例练习系列第四期⭐本期是jQuery动画——停止动画、淡入淡出、自定义动画系列专栏：前端案例练习笔者还是前端的菜鸟，还请大家多多指教呀~欢迎大佬指正，一起学习，一起加油

颜颜yan_·2022-12-03 21:59

前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）

目录一、案例效果二、实现思路三、完整代码+详细注释四、案例素材一、案例效果二、实现思路创建游戏背景板和小鸟，并分别设置相对定位与绝对定位；初始化背景图的位置；初始化小鸟的位置；设置游戏状态，游戏开始时背景和管道全部向左运动，游戏结束全部停止运动；使小鸟飞行，其实就是背景图在X轴方向的位置不断减小，实现小鸟向右飞行效果；设置点击事件，每点击一次小鸟在Y轴的位置减小，实现向上飞的效果；创建管道，X方向

Developer 小马·2022-04-19 03:36

蓝桥杯web开发-5道模拟题让你信心满满

上期传送门：四行js代码让别人无法复制你的网站文字，八行程序员都哭了这些前端案例看似很简单（内附动图）前端实现tab栏切换，这么常见的案例你学会了吗？

馆主阿牛·2022-04-06 07:42

前端案例：飞机大战( js+dom 操作，代码完整)

目录一、案例效果二、实现思路三、完整代码+详细注释四、涉及要点一、案例效果二、实现思路创建游戏背景板；创建我方战机，鼠标进入游戏面板后其随鼠标轨迹运动；onmousemove创建子弹，让子弹周期性的在战机处发出并让其向top值减小的方向(向上)移动，top小于0也就是子弹走出游戏面板时删除自身；创建敌机，让敌机周期性的在游戏背景板左侧的随机距离的位置产生，并让其向top增加的方向(向下)移动；定义

Developer 小马·2022-03-25 12:43

这些前端案例看似很简单（内附动图）

个人简介作者简介：大家好，我是阿牛，全栈领域新星创作者。个人主页：馆主阿牛支持我：点赞+收藏⭐️+留言系列专栏：硬泡javascript格言：迄今所有人生都大写着失败，但不妨碍我继续向前！上期传送门：初识JavaScript（揭开javascript的神秘面纱）javascript中的数据类型javascript中的数据类型转换javascript基础案例（循环）面试官最爱考的javascript

馆主阿牛·2022-03-21 08:50

原创【html5+css3+js+bootstrap】响应式Web前端案例--科技商城网站(包含多个页面)

前言最近在整理自己大学写过的demo，曾经，我也是一个设计并写页面的纯前端狗，学着学着渐入偏锋，专业的缘故，入坑了后端，已经很久没有这样纯写前端静态网页了，这个是我大二写的静态页面，实现的是一个科技企业网站，包含主页及二级页面多个页面，登录注册用了点php+mysql实现，UI页面效果图是自己原创设计，哈哈，曾经学过设计，有点设计功底残存。废话不多说，看图~实现效果实现的全部效果图如下：我做的页面

李猫er·2021-04-19 14:44

前端案例：贪吃蛇

贪吃蛇一、游戏介绍1、Map地图类2、Food食物类3、Shake蛇类4、Game游戏类5、实现效果二、页面结构框架三、Map地图类四、Food食物类五、Snake蛇类六、Game游戏控制类七、主函数调用八、总结重点在于面向对象的学习不注重css样式渲染一、游戏介绍1、Map地图类1.-clearData清空数据(不管是舍得位置还是食物的位置都是通过数据来控制)2.-setData设置数据3.-i

CCoisini.0202·2021-03-12 16:25

Vue+elementUI表格组件使用（table代码详细分析）

本篇是Vue+elementUI的使用案例前端代码解析学习本章要有一点点前端基础，才能更好的阅读在git上下载了一个前端案例，商品列表表格显示如下代码分析：如图我们显示出来的表格就是el-table中包含的元素

辰兮要努力·2020-09-16 17:04

前端案例--纯CSS3美化复选框

技巧：将input按钮和美化内容都放在label标签内，再通过定位将input按钮溢出隐藏！使用CSS3中的E:checked伪类选择器触发美化表单！纯CSS3美化复选框效果图：HTML：配送类型：全部京东配送第三方配送京东配送CSS:@charset"UTF-8";/*CSSDocument*/body{font:12px/22px"微软雅黑";}a{text-decoration:none;c

马灿发·2020-09-16 01:31

前端案例分享:简易手风琴

手风琴效果.accordions{overflow:hidden;width:800px;height:350px;margin:0auto;}.yhd-switchable-trigger{float:left;overflow:hidden;width:18px;height:350px;padding:3px25px;cursor:pointer;margin:2px;border-righ

chenlaojie7596·2020-09-12 15:59

Web前端案例_多选练习案例

Web前端案例_多选练习案例关于多选框的checked属性以及span标签的innerhtml属性的练习。1.案例分析利用多选框的checked属性以及span标签的innerHTML属性实现此案例。

晴天小风·2020-09-12 10:37

前端案例--仿京东商城楼梯式导航定位菜单

实现京东商城楼梯式导航定位菜单：滚动定位菜单项和点击定位菜单项！涉及知识点：find()、parent()、offset(）、scroll()等jQ函数，请自觉复习各种函数！html代码：1F服饰2F美妆3F手机4F家电5F数码6F运动7F居家8F母婴9F食品10F图书11F服务css代码：#menu{width:32px;height:360px;position:fixed;top:200px

马灿发·2020-08-18 21:03

typescript实战总结之实现一个互联网黑白墙

前言笔者上一篇文章TS核心知识点总结及项目实战案例分析主要写了typescript的用法和核心知识点总结,这篇文章将通过一个实际的前端案例来教大家如何在项目中使用typescript.你将收获如何使用umi

徐小夕_上海·2020-08-14 22:39

前端实战小案例--动态搜索框

朽木自雕xmzd·2020-08-08 18:16

前端案例 ——注册页面（html+css实现）

注册页面*{margin:0px;padding:0px;box-sizing:border-box;}body{background:url("img/2.jpg")no-repeatcenter;}.rg_layout{width:900px;height:500px;border:8pxsolid#eeeeee;background-color:white;/*让div水平居中*/margi

Xiong-er·2020-07-29 12:11

小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能

小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例，希望对你与学习前端的你有所帮助，今天分享的是移动端Vue+Vant的Uploader实现上传、压缩、旋转图片等功能的详细介绍

weixin_34357436·2020-07-29 06:22

前端案例之视频弹幕

基础版本*{margin:0;padding:0;}.dm{width:800px;height:600px;background-color:blue;margin:0auto;}.box{height:500px;background-color:#000;position:relative;overflow:hidden;}video{width:100%;height:100%;}.inf

HansMa·2020-07-27 22:18

前端案例-抽奖程序

这个简单的抽奖案例按照前端的习惯，分两部完成，即布局加脚本首先看下效果图布局比较简单，一个里有一个文本加一行文字，下面有两个按钮。系统自带的按钮比较丑，我用标签加事件监听代替（好吧，我自己弄的按钮也丑，哈哈）代码实现：开始抽奖啦！！！开始停止接下来就是css样式了，一般我会从最外面往里加样式，即从demo1的div开始加/*先清空默认边距*/*{margin:0;padding:0;}`#demo

牛犊·2020-07-07 17:37

从喜欢到放弃

最初选择前端是男神建议的，记得一天晚上男神发给我很多腾讯的前端案例，我当时看着觉得哇塞，好漂亮，和后台比起来貌似更具有创造力，也不会浪费自己的才华同时也可以不放弃敲代码。

NiceSang·2020-07-07 09:06

前端案例——轮播图的实现（定时切换图片）

显示效果为：主页图片每三秒更换一次。轮播图/*分析：1.在页面上使用img标签展示图片2.定义一个方法，修改图片对象的src属性3.定义一个定时器，每隔3秒调用方法一次*///修改图片src属性varnumber=1;functionfun(){number++;if(number>3)number=1;//获取img对象varimg=document.getElementById("img");

Xiong-er·2020-07-06 05:23

推荐频道