Web
关注
分享
扫一扫
文章平均质量分 76
HackShendi
学习+实践=快乐
展开
-
JS的Promise详解，优雅的书写异步任务
在浏览器中，程序的运行是同步的（单线程），要想实现异步，可以使用 setTimeout 函数，AJAX也可以异步执行当需求很复杂的时候，例如制作一个动画效果，两秒内将元素往上移50像素，然后一秒内往左移动10像素，代码如下// 计算一次多少毫秒,两秒50,一秒10 var oneNum = 2000 / 50 , twoNum = 1000 / 10;// 两秒移动50像素 function animOne() {num ++;animTwo();原创 2023-03-22 23:38:47 · 163 阅读 · 0 评论 -
JS使用Vue自定义组件实现动态多层数据渲染+递归+踩坑
在没有使用打包软件(WebPack，VueCli）的原生环境下使用vue自定义组件组件名称规则首先说一下组件名称规则，注册的组件名称用了大写的话在使用时则将大写改为 -大写的小写例如注册的名称 myEle，在使用时则原创 2022-11-20 00:13:10 · 1166 阅读 · 0 评论 -
weui 搜索框的使用
weui 搜索框的使用，输入搜索内容自动出现搜索提示...原创 2021-12-28 11:47:18 · 2412 阅读 · 0 评论 -
Web实现图片自适应，多余部分裁剪（类小程序 mode=“aspectFill“）
Hello, I’m Shendi小程序有种很好用的图片模式当加上这一行时，不管图片大小，都可以很好的显示整个图片（多余部分裁剪）在Web中可以这样实现类似效果原图效果图代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-11-29 11:21:15 · 823 阅读 · 0 评论 -
Bootstrap-fileinput文件上传
最近在页面中需要用到文件上传，自己不是专业整前端的，页面用到了 bootstrap 所以随便找了个插件使用下载通过百度直接搜索 bootstrap-fileinput 就可以看到 github 所在地址也可以直接点击下方链接进入选择版本下载https://github.com/kartik-v/bootstrap-fileinput/releases5.1.3版本，也是我用到的版本https://github.com/kartik-v/bootstrap-fileinput...原创 2020-12-28 11:56:55 · 2778 阅读 · 1 评论 -
JS遍历JSON,获取所有key/value
I;m ShendiJSONObject格式为 {"key": value, "key": value}字符串可通过 eval 函数处理var jsonObject= eval('(' + json+ ')');已知键名获取这是最常用的，一般都知道json数据里有啥，只需要取出来直接使用 jsonObject.键 来获取例如 {"a": 1, "b": 2}var a = jsonObject.a;var b = jsonObject.b;获...原创 2020-12-22 16:50:52 · 25904 阅读 · 5 评论 -
Web+Servlet实现文件上传与下载
Hi, i'm Shendi最近一段时间在写自己的项目,于是将这一块记录一下文件的下载我们使用的Web服务器默认都自带下载功能，通过url例如Tomcat,我们只需要在url中填写指定文件路径就可以下载但有一定局限性，比如资源可以被看到在哪个目录，这样容易被爬虫爬取，并且一些浏览器可以直接解析的文件就不会提供下载提示这样我们可以写一个Servlet，通过读取本地目录文件流的方式将数据返回给浏览器比较简单，直接使用传递的参数代表文件路径，直接上代码/** ...原创 2020-12-21 17:11:50 · 1875 阅读 · 3 评论 -
Web页面相同部分提取小技巧
Hello,I'm Shendi最近在写 Web 页面,期间难免有很多页面共用同一块元素例如 导航栏,底部版权信息等实现此效果有多种方法目录为了方便测试,首先创建六个html页面使用 frameset 元素直接在每个页面中增加使用 iframe 元素使用ajax的方式使用 script 的方式为了方便测试,首先创建六个html页面这里演示的是提取相同部分,所以页面的美化不是重点分别为head.html(头部导航栏) left.html(左..原创 2020-10-16 11:14:32 · 2839 阅读 · 0 评论 -
web在新窗口中打开页面,Post请求
I'm Shendi;需求有的时候我们的页面需要在新窗口中处理操作-比如支付页面这时我们可以直接设置a 标签的属性 target='_blank' 来在新窗口中打开但是这样显得很不安全,并且只能为get请求思路有几种方法我们可以在 js 中创建 a 标签来进行处理,但是只能是get请求 在前后端分离项目中,一般都是post请求 在新窗口,参数都在链接上显而易见 使用表单a标签形式//这里是js代码var a = document.c...原创 2020-08-29 19:12:24 · 4388 阅读 · 2 评论 -
Cookie以及JS对Cookie的操作,附源码
Hi,I'm Shendi因为最近整前后端分离项目,需要使用到cookie,于是就封装了一下,源码放到了最后目录Cookie查看浏览器中的CookieCookie有什么用?JS操作Cookie添加Cookie获取Cookie删除Cookie源码Cookie首先讲一下CookieCookie是保存在浏览器上的一串数据,每一个网站都有不同的cookie.Cookie的格式是键值对形式:键=值;键=值;.....查看浏览器中的Cook...原创 2020-08-26 12:16:09 · 5685 阅读 · 2 评论 -
web加载动画遮罩实现,附简易使用代码
Hi,I'm Shendi目录效果图实现思路使用方法代码如下使用到了 jquery不使用 jQuery效果图实现思路比较简单,一个div,绝对布局,百分百的宽高,里面一个图片居中.加载的动画图片需要自己设置使用方法代码在下方先在当前页面引入js文件,然后直接使用 loading.show() 来显示加载动画使用 loading.hide() 来隐藏加载动画代码如下使用到了 jqueryvar loading;$(d...原创 2020-08-22 12:47:46 · 3589 阅读 · 0 评论 -
js实现分页
最近使用到 bootstrap 和 thymeleaf.对分页记录一下,下次直接用js 控制数据进行分页. 通过对数据库进行分页查询获取指定数据量的数据 获取到数据后传到前端,js获取. 必要条件: 当前页数 总页数 规定一个按钮组的页数(下面一排按钮显示的数量). 效果1: 点击最后一个按钮就换到下一个按钮组,第一个按钮为当前页数. 点击第一个或不是最后一个按钮则按钮组不变. 实现: 使用求余的方式计算出一个按钮组有多少个按钮. 例如总共有十页,每个原创 2020-06-03 09:42:50 · 7342 阅读 · 0 评论 -
Java多用户(session)测试环境
对于一个写好的Web程序(http),比如网上商城...测试登录功能(挤下线),网游,通常都会需要多个用户来测试(一般都是用session)所以这时我们就需要有多个session,比如我们打开一个不同的浏览器,session就不同了,但这里有一种更简单的方式不同域名访问同一个服务器会产生不同session修改电脑的 hosts 文件,Windows系统的在 C:\Windows\Sy...原创 2020-05-03 08:20:40 · 7250 阅读 · 0 评论 -
HTML自定义标签
1. HTML import如下上面的代码，一眼就能看出语义。如果将<share-buttons>元素的样式与脚本，封装在一个 HTML 文件share-buttons.html之中，这个元素就可以复用了。使用的时候，先引入share-buttons.html。<linkrel="import"href="share-buttons.html">...转载 2020-04-20 16:25:36 · 7004 阅读 · 0 评论 -
[原生Js]AJAX学习笔记(总结)
Hello I'm Shendi,this is ajax note;get with w3c...AJAX(Asynchronous Javascript and xml) 异步js和xml AJAX 不是新的编程语言,而是一种使用现有标准的新方法 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下 AJAX是一种无需重新加载整个网页的...原创 2020-02-16 11:23:01 · 6806 阅读 · 0 评论 -
(详)h5+js实现文字雨 Canvas的使用
Hello,我是Shendi,在web前端的路上一去不复返这次给大家带来了一个文字雨效果,效果如下实现流程首先我们要知道什么是Canvas Canvas是h5的一个标签(画布) 在画布上任何一点都可以操作(绘制) Canvas需要配合js来使用创建Canvas 新建一个html文件,在<body>标签中添加如下标签 代码如下<...原创 2019-12-31 12:50:19 · 8261 阅读 · 0 评论 -
在web上制作动画(css3)
今天学css3的动画，在这里记录下使用方法以及一些技巧定义一个动画在css3中定义动画的语法为 @keyframes 名称 {}这是w3c的例子 兼容所有浏览器 @keyframes myfirst { from {background: red;} to {background: yellow;} ...原创 2019-12-28 13:28:36 · 7542 阅读 · 0 评论