- 博客(61)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 回归前端学习第15天——VUE的模板语法（插值、指令等,git部分指令）
简单介绍下VUE插值的方法，记录下git提交代码的常用指令插值的方法1.文本插值2.指令3.一些缩写记录下git给github、码云等上传代码时需要用到的命令插值的方法1.文本插值双大括号实现的文本插值<span>Message: {{ msg }}</span>该处将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。2.若没有v-html指令，或许双大括号会将数据解释为普通
2020-08-06 00:03:12
144
原创 表单登陆验证框
JS实现对登陆界面表单输入内容的验证，借助正则表达式实现实现效果HTMLJS实现效果HTML <!-- 验证登陆信息S --> <div class="login_container"> <h1>验证表单中信息是否正确</h1> <label for="">QQ</label><input type="text" name="" id="inp1" /><span><
2020-10-03 22:17:27
242
原创 JS验证姓名
JS验证姓名HTMLCSSJSHTML <!-- 验证表单姓名是否正确S --> <div class="phone_container"> <h1>验证表单中姓名是否正确</h1> <label for="">姓名</label><input type="text" name="" id="inp1" /> <em id="judge2"></em>
2020-09-30 06:08:37
2887
原创 JS验证密码强度——正则表达式进行判断
借助正则表达式，实现对用户输入的密码进行等级评定实现效果HTMLCSSJS实现效果HTML<!-- 验证密码强度S --> <div class="pswContainer"> <h1>验证密码强度</h1> <label for="">密码</label> <input type="text" id="inp1" maxlength="16"> <div
2020-09-28 13:10:52
2998
原创 JS实现页面弹出登录框，点击页面后登录框消失
运用到事件冒泡的理论，用JS实现点击登录后弹出登录框，点击页面后登录框消失的效果实现效果理论基础1.事件冒泡2.举例说明取消冒泡事件执行太快无法显示时需要取消冒泡HTMLCSSjs实现效果理论基础1.事件冒泡事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。2.举例说明var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");
2020-09-26 05:46:15
2966
原创 JS实现滚动栏的效果
根据比例计算方法实现内容随滚动条的调整进行改动的效果实现效果HTMLCSSJS实现效果HTML <!-- 滚动条特效S --> <div class="gd_box" id="gd_box"> <h1>滚动效果</h1> <div class="content" id="content"> 1、弄堂的秋天没有枫叶bai成行的美景，却du有着独特的秋色。西风扫过，梧桐树冠抖几下z
2020-09-24 18:31:21
836
原创 JS实现拖拽弹出框的效果
JS实现拖拽弹出框的效果实现效果代码HTMLCSSjs实现效果代码HTML <!-- 鼠标拖拽特效S --> <h1>可拖拽特效</h1> <div class="tz_nav"> <a href="javascript:;" id="register">注册信息</a> </div> <div class="tz_d_box" id="d_
2020-09-20 20:33:45
684
原创 JS特效实现放大镜效果1
用JS写一个鼠标经过后放大该区域图片的效果写一个获取鼠标焦点并计算鼠标当前位置并显示在盒子里的铺垫代码HTMLcssJS写一个获取鼠标焦点并计算鼠标当前位置并显示在盒子里的铺垫magnifier_box.onmousemove = function (event) { var event = event || window.event; // 获取鼠标在页面中的坐标 var pageX = event.pageX || event.clientX + document.documentEle
2020-09-18 06:04:55
139
原创 JS获取网页可视区域宽度和高度——响应式布局奠基
JS获取页面可视区域宽度和高度，为实现响应式布局奠基，实现效果为界面大小改变后，变色并显示当前屏幕大小适合的设备JS代码JS代码// 获取网页可视区域宽度和高度的JS——响应式布局JS S// 打开时就响应 屏幕改变window.onresize = function () { responsive();}// 网页变大变小时也要实时响应responsive();function responsive() { if (client().width > 960) { d
2020-09-10 09:48:08
879
原创 JS实现动画特效5(实现手风琴特效2）
实现手风琴特效2实现效果代码htmlcssjs实现效果代码html<!-- 手风琴特效S --><div class="wrap" id="wrap"> <h1>手风琴特效</h1> <div class="slide" id="slide"> <ul> <li><a href=""><img src="img/1.jpg" alt=""></a>&
2020-09-04 17:58:44
377
3
原创 JS实现动画特效4（实现手风琴特效1）
利用封装好得缓动函数实现手风琴特效，缓动函数见前一篇博客代码实现效果HTMLCSSJS代码实现效果HTML <!-- 手风琴特效S --> <div class="accordion_box"> <h3>手风琴特效</h3> <ul> <li class="accordion_box_li"></li> <li class="accordion_
2020-09-01 20:54:32
432
原创 JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片、筋斗云动画小知识1.浏览器的offsetLeft是就近取整，要实现向上取整或向下取整，可以调用Math.ceil（）或Math.floor（）缓动动画的初级封装函数，为手风琴动画做铺垫实现效果代码HTMLCSSJS缓动动画的高级封装函数，为手风琴动画做铺垫实现效果筋斗云动画实现效果代码HTMLCSSJS小知识1.浏览器的offsetLeft是就近取整，要实现向上取整或向下取整，可以调用Math.ceil（）或Math.floor（）缓动动画的初级封装函数，为手风
2020-08-29 19:40:49
739
原创 JS实现动画特效1（自动/手动播放的轮播图，可实现点击索引的圆点后跳转到对应图）
JS实现动画特效点击移动滑块HTMLCSSjs效果图注意1.一定得给移动的滑块加上position:absolute才能实现滑动2.将滑动的代码封装为animate函数，便于调用手动轮播图注意1.实现无缝轮播，轮播4张图，需要5张一起轮播2.sd_inner.style.left是一个字符串，所以要通过parseInt（）函数，将其转化为数字才能进行计算，再加上px成为一个字符串来设定sd_inner点击移动滑块HTML <!-- 点击移动滑块S --> <h1>点
2020-08-28 22:23:50
1446
原创 前端实现小米商城网页4（中间部分）
小米商城的中间部分小知识一个容器的第一个子元素的margin-top会转移给父元素的margin-top；解决办法如下：实现效果代码index.htmlindex.css小知识一个容器的第一个子元素的margin-top会转移给父元素的margin-top；解决办法如下：1.给父元素加overflow:hidden2.将第一个子元素的margin-top变成父元素的padding-top3.给父元素加上border实现效果代码index.html <!-- 菜单和广告位s -
2020-08-27 19:44:59
1008
原创 前端实现小米商城网页3（广告栏布局）
的小知识1.轮播图写法1.1 基本结构1.2 换图的小圆点2.绝对定位下的竖直居中小知识1.轮播图写法1.1 基本结构一个固定大小的div，很长的ul长条，滑块，每个和div大小一样的图，分界1.2 换图的小圆点2.绝对定位下的竖直居中position:absolute;top:50%;margin-top:自身高度的一半;...
2020-08-26 18:46:17
828
原创 前端实现小米商城网页2（竖排导航、搜索框的实现）
实现小知识点给盒子设置层级，避免覆盖,但是盒子内有设置过overflow:hidden的时候，层级会不起效果注意设置relative的父元素，找到合适且不会影响其他元素的父元素才行小知识点给盒子设置层级，避免覆盖,但是盒子内有设置过overflow:hidden的时候，层级会不起效果z-index:10;注意设置relative的父元素，找到合适且不会影响其他元素的父元素才行...
2020-08-25 20:47:32
2273
2
原创 前端实现小米商城网页1（头部导航栏）
模仿小米商城，写一个网页，头部主要通过HTML+CSS完成，用hover实现菜单栏的影藏与显示HTML部分style.CSS部分效果图小知识点写hover显示影藏内容时，通常是一个大的div包裹，当做一整个模块去掉list最后一个元素的某些样式，用:hover:last childHTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g
2020-08-24 23:03:33
4619
原创 前端实现五子棋小游戏2（AI实现人机对战）
通过一个简单的算法，来实现AI智能对弈的五子棋小游戏AI难点解析赢法数组赢法的统计数组判断胜负计算机的落子规则代码实现赢法数组赢法种类的索引横线赢法竖线赢法横线赢法斜线赢法反斜线赢法赢法的统计数组定义函数computerAI（）实现电脑对弈遍历棋盘与所有赢法，对黑棋/白棋落子行为进行加分记录并选出最高分数，即为获胜整体代码htmlCSSscript.jsAI难点解析赢法数组三维数组，前两维是棋盘，第三维是赢法数组；每一种赢法对应一个二维棋盘，上面或许只有5个点是true，这5个点一定连成一条线赢法的
2020-08-23 18:48:09
7480
1
原创 前端实现五子棋小游戏1（本地双人对战）
运用canvas写一个本地五子棋小游戏HTML部分JS 部分CSS 部分实现效果HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>五子棋小游戏</title&g
2020-08-22 19:35:06
1321
原创 前端实现双人联机版俄罗斯方块小游戏2（实现双人联机)
基于websocket实现双人联机俄罗斯方块游戏，逻辑思路整理如下思路整理1.游戏开始，双方都收到start消息，同时调用start方法2.start方法中，调用game.init方法，同时发送init消息给server,server收到后会转发给另一个游戏玩家3.另一个游戏玩家在remote.js中接收init,会驱动对方去调用start方法（next消息同init消息）思路整理1.游戏开始，双方都收到start消息，同时调用start方法socket.on('start', function ()
2020-08-21 19:59:57
2374
原创 前端实现俄罗斯方块小游戏1（在单人版基础上，实现基于websocket的双人版游戏)
修改单机版游戏代码，并对其进行逻辑处理和初始化更改单机版页面结构，实现用户进入后，单数用户显示需要等待另一个玩家，双数的客户进入后，可以开始游戏~HTML中加入divremote.js中绑定按钮事件创建wsServer.js文件script.js中传入socket对象更改单机版页面结构，实现用户进入后，单数用户显示需要等待另一个玩家，双数的客户进入后，可以开始游戏~HTML中加入div<div class="square" id="remote"> <div class="t
2020-08-21 00:29:06
240
原创 回归前端学习第26天-实现俄罗斯方块小游戏9（实现单机版，一个计时带干扰的单机版俄罗斯方块小游戏完成)
最终完善单机版俄罗斯方块小游戏，增加干扰功能——每10秒增加一行增加干扰功能game.js中加入addBotLine函数local.js中加入增加干扰功能game.js中加入addBotLine函数// 底部增加行 var addBotLine = function (lines) { for (var i=0; i<gameData.length - lines.length; i++) { // 行上移 gameData[i] = gameData[i + lines
2020-08-19 22:40:40
216
原创 回归前端学习第25天-实现俄罗斯方块小游戏8（实现单机版4—设置计时、消行加分、游戏结束标志）
增改game.js与local.js代码，实现对游戏的设置计时、消行加分、游戏结束标志等环节的设计计时计分游戏结束完整代码local.jsgame.js注意：计时1.定义显示时间的div，并通过init赋值到dom中（在game.js中）2.通过local.js传入doms3.game.js中写函数setTime,显示到界面4.在local.js设置计时函数1.定义显示时间的div，并通过init赋值到dom中（在game.js中）var timeDiv;2.通过local.js传入d
2020-08-19 00:12:46
476
原创 回归前端学习第24天-实现俄罗斯方块小游戏7（实现单机版3—实现消行、更新方块、结束）
更改game.js、local.js、game.js中加入代码使用下一个方块设置到底部后，方块定住并换色实现消行、游戏结束最后导出整体代码local.js代码move函数更改随机生成下一个方块修改开始函数，增加结束函数game.js中加入代码使用下一个方块// 使用下一个方块var performNext = function (type, dir) {cur = next;setData();let squareDiv = new SquareFactory();next = square
2020-08-16 22:21:50
156
原创 回归前端学习第23天-实现俄罗斯方块小游戏6（实现单机版2——键盘控制方块移动）
界面出现对应方块后，可自行控制其左右或快速下降的移动，上键可以实现方块形状的改变调整代码结构实现键盘控制方块移动game.js中代码square.js中代码squareFactory.js中代码local.js代码script.js代码实现效果调整代码结构首先调整代码结构，建立JS文件，如图实现键盘控制方块移动game.js中代码var Game = function () { //dom元素 var gameDiv; var nextDiv; // 游戏矩阵
2020-08-15 19:16:20
275
原创 回归前端学习第22天-实现俄罗斯方块小游戏5（实现单机版1——结合HTML、CSS、JS来搭建界面）
实现单机版俄罗斯方块小游戏，搭建页面实现静态基础页面实现静态基础页面HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>俄罗斯方块5</title> <
2020-08-14 23:15:36
216
原创 回归前端学习第22天-实现俄罗斯方块小游戏4（socket.io实现简易聊天室+gitignore配置）
用socket.io写实现简易聊天室，可以直接发送一个对象，不用websoket那样，先建立对象，再转换字符串了;还可以自定义事件，即不用像websocket一样去定义typesocket.io官网地址[https://www.socket.io](https://socket.io/)socket.io官网地址https://www.socket.io从网站上可以学些基础语法，并下载script标签内容<script src="https://cdnjs.cloudflare.com/ajax
2020-08-13 20:51:23
172
原创 原创 回归前端学习第21天-实现俄罗斯方块小游戏3（深入了解Websocket~优化简易聊天室）
对昨天的简易聊天室进行优化增加一个mes对象，将传送的数据放在对象里增加一个mes对象，将传送的数据放在对象里wsServer.js中替换代码 broadcast(conn.nickname + '进入聊天室') broadcast(str) broadcast(conn.nickname + '离开聊天室~') 为代码：var mes = {}; mes.type = "enter"; mes.data = conn.nickname + "进入聊天室"; bro
2020-08-12 23:38:32
215
原创 回归前端学习第21天-实现俄罗斯方块小游戏2（深入了解Websocket~制作一个简易聊天室）
铺垫一下基础知识，先把Websocket以及socket.io都了解好，为后续做铺垫，所以今天在昨天的基础上，着手做一个聊天室实现一个简易聊天室利用websocket,实现用户进入后显示进入人数，退出时显示已经退出~实现一个简易聊天室利用websocket,实现用户进入后显示进入人数，退出时显示已经退出~在上一节的基础上，进行改动——点击发送后，将文本框的内容发送给server,接受数据后，再将数据通过div显示在界面，通过自建函数showMessage实现<body> <
2020-08-11 23:09:41
201
原创 回归前端学习第20天——实现俄罗斯方块小游戏1(搭建websocket)
结合WebSocket 来实现一个俄罗斯方块小游戏吧~WebSocket 介绍WebSocket 特点服务端实时通信的方法：AJAX轮询和Long Polling长轮询开始码代码吧，小游戏走起！搭建自己的WebSocket效果图WebSocket 介绍webSocket是一项可以让服务器将数据主动推送给客户端的技术，是一种通信协议，区别于HTTP协议，HTTP协议只能实现客户端请求，服务端响应的这种单项通信；而WebSocket可以实现客户端与服务端的双向通讯，也就是可以做到服务端主动将消息推送给客
2020-08-11 00:20:37
285
原创 回归前端学习第19天——CSS一些简易小动画
写一些CSS得动画和效果⑧动画中的关键帧实现水平横动效果进入时有缩放效果，鼠标滑过也会有缩放效果一个等待的loading动画动画中的关键帧实现图片在浏览器内自动四处游荡~<div class="rect"></div>.rect{ width:300px; height:400px; background:url(../xing.jpg); position: fixed; /*指定用哪个动画*/ animation-name:mymove; /*动画持续
2020-08-09 22:47:49
144
原创 回归前端学习第18天——CSS一些简易动画小实例，好看哦
CSS制作图形/动画实例图片渐变放大（制作头像）点击对应元素，会消失css画个圆透明背景给元素设置高亮，比如图片过度效果,鼠标放上就变形~好看的圆点小动画，涟漪效果图片渐变放大（制作头像）鼠标放上后变大，可以用作设置头像<img src="./blue.jpg" /> <style type="text/css"> body{ text-align: center; } img{ border-radius:50%; /*过度放大效果*/
2020-08-08 22:55:47
330
原创 回归前端学习第17天——JS/CSS设计镜像展开的动态、好看的菜单
用JS/CSS实现径向动画菜单HTML部分JS实现CSS实现HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>一个好看的圆形径向菜单鸭</title></head><body> <h1>一个好看的圆形径向菜单鸭~</h1> <div class="nav-wrap
2020-08-08 00:00:48
150
原创 回归前端学习第16天——ＶＵＥ实现ToDoList
用VUE实现一个可以进行增删显示的ToDoListv-model实现表单绑定 双向数据绑定，组件接收值，界面反馈值的变化 <input type="text" v-model="inputValue">监听事件，点击触发，执行函数handleBtnClick <button @click="handleBtnClick">提交</button>自定义组件TODOList，借助变量content.index.实现子组件的数据绑定 ，通过监听事件，点击触发de
2020-08-07 00:47:19
109
原创 回归前端学习第14天——走进VUE框架
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，Vue 是一套用于构建用户界面的渐进式框架下载安装VUEVUE一些基础需要理解一下的VUE生命周期钩子函数下载安装VUE下载地址及具体步骤可以参考这个链接https://blog.csdn.net/Smile_Sunny521/article/details/89714388?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-9
2020-08-05 00:01:41
148
原创 回归前端学习的第13天——API（视频、音频）
HTML5带有用于将富媒体嵌入到文档中的元素，video和audio具有它们自己的用于控制播放，搜索等的APIHTML5视频和音频HTMLMediaElement API方法事件HTML5视频和音频<video controls> <source src="a.mp4" type="video/mp4"> <source src="a.webm" type="video/webm"> <p>不支持该视频格式. 点击有 <a href="r
2020-08-04 00:40:52
183
原创 回归前端学习第12天——从服务器获取数据
从服务器获取数据可以用ajax，也可以直接载入服务器页面，当然用ajax是极好的！Ajax1.基本的Ajax请求2.GET 请求3.POST请求4.通过 HTTP GET 请求载入 JSON 数据AjaxAsynchronous JavaScript and XML（Ajax）， 倾向于使用XMLHttpRequest 来请求XML数据，使用Web API作为代理来更智能地请求数据，而不仅仅是让浏览器重新加载整个页面优势：1.页面更新速度更快，响应更快。2.每次更新都会下载更少的数据，更少地浪费带
2020-08-02 23:20:06
349
原创 回归前端学习第11天——操纵DOM
何为DOMDOM操作操作DOM方法通过DOM创建、增删元素DOM操纵CSS样式操作DOM实现自适应窗口大小何为DOMDOM：JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。主要特点：1.整个文档是一个文档节点2.每个标签是一个元素节点3.包含在元素中的文本是文本节点4.每一个属性是一个属性节点5.注释是注释节点DOM树是什么？DOM树是结构，展现元素和元素之间的关系.理解节点的具体含义<!DOCTYPE html>.
2020-08-02 00:27:44
228
原创 回归前端学习第10天——网页API
API介绍JavaScript中的APIJavaScript，API和其他JavaScript工具之间的关系API的用途常见的浏览器API常见的第三方APIAPI如何工作？基于对象API介绍应用程序接口（API）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。来看一个现实中的例子：想想您的房子、公寓或其他住宅的供电方式，如果您想在您的房子里用电，只要把电器的插头插入插座就可以，而不是直接把它连接到电线上——这样做非常低效，而且对于不.
2020-07-31 23:25:34
757
原创 回归前端学习第9天——JS的Promise承诺
当我们不知道函数的返回值或返回需要多长时间时，使用Promise是构建异步应用程序的好方法。它们使无需深层嵌套的回调即可更轻松地表达和推理异步操作的序列，并且它们支持类似于同步try...catch语句的错误处理方式。承诺适用于所有现代浏览器的最新版本Promise定义举例一个视频聊天应用程序解释并实践Promise应对失败链接块创建自己的PromisePromise定义什么是Promise？从本质上讲，Promise是表示操作中间状态的对象，实际上，它是将来会在某个时候返回某种结果的保证。不能保证确
2020-07-31 00:38:15
242
前端VUE实战——去哪儿网项目实战.7z
2020-08-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人