![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5
风叶翩翩
有过众多的项目开发经验。精通Java开发,Sql数据库等,熟练使用主流开发工具如IDEA等。对开发编程有着特殊的爱好和恒心。
展开
-
购物车逻辑
当我们添加购物车之后,我们可以点击加减按钮来实现商品数量的增加和减少,当商品数量变化的同时商品的总的价格也是在不停的变化的。效果图完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me原创 2020-05-30 16:42:47 · 306 阅读 · 0 评论 -
输入框数量加减
不仅仅是一个input框,我们不仅可以在里面直接输入数字,而且我们点击左边或者右边的按钮会实现输入框数量的减少和增加,点击只能增加一个或者减少一个。效果图完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="https://code.j原创 2020-05-30 16:31:38 · 3471 阅读 · 0 评论 -
动画分享菜单
制作一个动画分享的菜单效果演示注意:在我们的程序开始之前我们一定要导入jquery.js架包并且找到如图所示的矢量图标。完整代码html代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...原创 2020-03-07 21:22:42 · 113 阅读 · 0 评论 -
动态背景登录
前端动态背景登录效果演示完整代码首先我们要导入jquery.js包html代码<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">...原创 2020-03-07 20:57:59 · 779 阅读 · 0 评论 -
炫酷线条背景动画
使用H5的Canvas实现网页的炫酷线条背景特效。效果演示代码展示html内容<!DOCTYPE html><html ><head><meta charset="UTF-8"><title></title><style>canvas{ position:absolute; top:0;...原创 2020-02-11 17:05:14 · 630 阅读 · 0 评论 -
响应式布局Demo
顾名思义,响应式布局就是为适应不同终端而形成的一种技术。我总结了一个简单的例子帮助大家了解和学习响应式布局。实现响应式布局的几种方式:媒体查询、JS、流体布局、弹性布局…常用的meta标签<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewp...原创 2020-02-07 17:02:14 · 888 阅读 · 0 评论 -
响应式布局
在开始我们的响应式布局之前我们要了解一个概念,响应式是什么?响应式布局就是一个网站能够兼容多个终端,例如一个网站能够兼容在在电脑,平板和手机上。优点和缺点优点:面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大,效率低下代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果一定程度上改变了网...原创 2020-02-07 15:45:59 · 139 阅读 · 0 评论 -
前端开发中游览器的兼容问题总结
首先,为什么各种浏览器会产生兼容性问题?产生这个问题的主要原因是市面上的浏览器的种类很多,但由于不同的浏览器的内核不一致,从而导致各个浏览器对网页的解析就产生了差异。对于解决浏览器兼容性问题,我们要从三个方面入手:html部分、css部分、js部分。1、html部分1、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素,从而导致不能解析。这点主要体现在html5的新标...原创 2020-02-07 11:25:07 · 963 阅读 · 0 评论 -
搜索栏联想词提示
在我们需要游览一些网站的时候,我们经常需要使用搜索引擎来进行搜索,无论是百度谷歌还是搜狐等,我们都需要在搜索栏中输入相关的搜索词,当我们点击进行输入的时候,下面会给出许许多多的提示词,程序自动联想你可能输入的内容,所以往往我们只输入了一个词就看到了我们想要的题目直接点击进行搜索就行了。那麽我们如何来实现如上所说的联想词提示的搜索效果的呢???首先我们来看一下效果如上图所示效果非常完美,那麽...原创 2020-01-27 18:11:07 · 1462 阅读 · 0 评论 -
密码强度显示
使用HTML,CSS及JS实现注册功能中密码强度的显示,根据输入的密码判断并显示用户输入密码的强度等级是高还是低等。效果演示代码演示html内容<div class="container"> <div class="userName-wrapper"> <label for="userName">账户:</label>...原创 2019-12-24 12:09:20 · 1518 阅读 · 0 评论 -
点击出现小心心
使用鼠标的点击事件,使用鼠标点击任意地方的时候,点击的地方会出现一个小心,每一次出现的小心的颜色都不一样。原理分析1.设置点击的范围2.鼠标点击事件3.记录鼠标点击的位置在此位置出现一颗小心4.小心向上浮动并且自动消失5.小心颜色的变幻效果演示代码演示html代码<!DOCTYPE html><html xmlns="http://www.w3.org/1...原创 2019-12-18 14:54:34 · 709 阅读 · 2 评论 -
在线答题系统
使用Jquery制作了一个在线答题系统功能分析1.开始界面2.结束界面3.题目的内容和选项的选择4.题目的切换5.分数的计算6.判断是否选中选项效果演示代码演示一 . html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT...原创 2019-12-18 13:44:08 · 3111 阅读 · 2 评论 -
多彩三角形
H5特效多才三角形,使用H5新特性canvas画布制作的四周阴影效果中部出现很多的各种颜色的三角形。效果演示代码演示<!DOCTYPE HTML><html> <head> <title>demo</title> <style type="text/css"> body { margin: 0...原创 2019-12-16 16:47:29 · 187 阅读 · 0 评论 -
热点地图
使用H5制作一个中国的热点地图,地图上标识出的地方会有波纹向四周散发的动态效果。效果演示代码演示<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; chars...原创 2019-12-13 16:47:56 · 1728 阅读 · 0 评论 -
鼠标吸附彩色气泡
H5Cavas制作鼠标吸附彩色气泡。当鼠标在屏幕上移动的时候,鼠标划过的区域会出现许多彩色气泡,并且会自动消失。效果演示看了如此效果是不是心动的感觉呢???代码展示<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>鼠标吸附彩色气泡</tit...原创 2019-12-10 20:43:52 · 192 阅读 · 0 评论 -
HTML5 新特性
HTML5 对以前的HTML内容进行了舍弃和添加,那么HTML5新增加了什么内容呢?让我们一起来看一下吧。一、新增的语义化标签1. header2. nav3. section 页面中的内容区块,例如:章节、页眉、页脚4. hgroup 对页面中的内容区块的标题进行整合5. article6. figure 文章中的图或表等内容区域7. aside 表示article元素内...原创 2019-12-10 20:20:23 · 80 阅读 · 0 评论 -
弹框提示
jquery弹框提示框的实现。原理分析1.点击按钮出现弹框2.设置弹框标题和内容3.设置取消和确定两个按钮4.点击确定继续执行5.点击取消返回此页面效果演示原始样式点击之后点击确认按钮代码演示在开始我们的程序之前注意:引入Jquery.js架包<script type="text/javascript" src="js/jquery.js"></...原创 2019-12-06 09:50:24 · 378 阅读 · 0 评论 -
拼图游戏
使用JS制作了一款拼图游戏供大家参考。原理分析:1.鼠标的点击和松开事件2.显示原图作为参考3.方块的移动替换4.是否完成拼图的判断5.完成之后会弹窗提示效果演示代码展示...原创 2019-12-06 09:25:24 · 561 阅读 · 1 评论 -
HTML全屏背景图
当我们在写前端页面的时候为了页面的美观我们通常会为页面设置图片背景,那么我们如何来设置全屏的背景图呢???设置全屏背景图需要三个属性 background-image: url(img/untitled.png); background-repeat: no-repeat; background-size: cover;案例说明设置背景图片代码设置<!DOCTY...原创 2019-12-05 16:46:15 · 15537 阅读 · 1 评论 -
JS贪吃蛇
用js实现贪吃蛇小游戏。原理详解1.使用canvas画布2.游戏进入即开始3.键值对控制蛇的移动方向4.游戏结束弹框提示效果演示原始样式游戏结束代码展示<!doctype html><html> <body> <canvas id="bu" width="400" height="400" style="background: ...原创 2019-11-26 21:50:40 · 264 阅读 · 0 评论 -
input输入框内容只读
有的时候一些固定的数据只能观看而无法修改,那麽我们如何设置呢?设置input输入框内容的只读性在此我总结了两个方法。效果演示确实进行了选中修改添加文本内容等操作,但是数据始终是无法修改的。方法一readonly属性使用方法<input type="text" value="admin" readonly="readonly" />方法二disabled属性使用方...原创 2019-11-26 21:22:27 · 8656 阅读 · 0 评论 -
罗盘时钟
用HTML和CSS以及JavaScript实现罗盘时钟。原理分析:1.年月日时分秒的定义2.定时器的使用3.分钟到小时如何变化4.定义数组存放内容效果演示初始状态时间显示代码展示HTML内容<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><t...原创 2019-11-25 08:30:47 · 2997 阅读 · 6 评论 -
删除a标签下面的横线
在HTML中我们经常会使用a标签跳转链接,但是会发现a标签下面出现一个横线特别难看,给大家一种删除a标签下面横线的方法。删除a标签下面横线使用: text-decoration: none;效果示例代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&...原创 2019-11-24 09:33:38 · 4291 阅读 · 0 评论 -
去掉li前面的圆点
在HTML中使用无序列表ul li的时候通常前面会出现一个圆点,那么如何把这个圆点去掉呢???在 li 里使用: list-style: none;案列演示没有使用list-style: none;使用list-style: none;示例代码<!DOCTYPE html><html> <head> <meta charset="...原创 2019-11-24 09:23:04 · 8668 阅读 · 0 评论 -
H5 炫酷导航
使用H5和CSS制作非常炫酷的旋转标题栏。原理分析1.使用ul(无序列表)2.圆形边框样式3.透明度的设置4.边框阴影的添加5.li去掉前面的圆点效果演示初始样式旋转动画旋转完毕代码演示@1 CSS样式<style> * { margin: 0; padding: 0; } body { background:...原创 2019-11-24 09:12:49 · 1124 阅读 · 0 评论 -
简单导航栏
实现一个简单的导航栏。使用HTML和CSS实现简单的导航栏效果,鼠标放上改变背景杨色。效果演示代码演示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> ul...原创 2019-11-24 08:51:45 · 279 阅读 · 0 评论 -
顶部导航栏
HTML和CSS实现顶部导航栏,二级菜单的实现。原理分析:1.使用ul(无需列表)嵌套ul(无序列表)2.鼠标放上改变背景颜色3.二级菜单的显示效果演示:初始样式鼠标放上代码演示<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title><...原创 2019-11-24 08:33:21 · 865 阅读 · 0 评论 -
拼图验证码
H5的Canvas实现一个拼图验证码。功能分析:1.验证码图片的生成2.滑块图片的显示3.底部滑块的横向移动4.滑块上的文字显示效果演示:初始状态滑动成功之后有没有一种心动的感觉呢???代码演示==注意:==程序中要引入jquery.js架包Body内容 <link rel="stylesheet" href="css/style.css"> <...原创 2019-11-22 13:41:52 · 1528 阅读 · 0 评论 -
别踩白块小游戏
用H5新特性实现别踩白块小游戏。功能分析:1.游戏开始按钮2.每点中一个记一分3.分数达到二十弹出鼓励弹框4.点击错误则游戏结束效果演示看了效果有没有急迫的心情呢?代码演示body内容<body> <h2>本次得分</h2> <h2 id="score">0</h2> <div id="m...原创 2019-11-19 08:28:44 · 633 阅读 · 0 评论 -
H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落。这个特效使用了H5的新特性Canvas。效果演示代码展示body代码<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>H5 Canvas下雨特效</title><link ...原创 2019-11-18 11:56:21 · 1002 阅读 · 0 评论 -
图片滚动显示
用H5实现图片滚动显示像跑马灯一样的效果。程序详解:图片滚动的开始和停止鼠标的放上和移走事件无限循环每次滚动速度的快慢效果演示(图片自右向左滚动)代码演示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <...原创 2019-11-17 17:51:16 · 1336 阅读 · 0 评论 -
H5 五子棋小游戏
用H5实现双人五子棋小游戏。功能分解:棋盘的大小自己设置白色棋子和黑色棋子的点击事件有棋子的地方不能再次放棋子判断同色棋子是否够五个够五个之后弹框显示胜利效果演示原始样式选择之后开始游戏有没有一种特别好玩的感觉呢???代码演示body<body> <section id="chessboard" class="clear"> &l...原创 2019-11-13 21:02:43 · 1623 阅读 · 0 评论