JavaScript/HTML
文章平均质量分 68
黑夜开发者
CSDN领军人物,数年电商行业从业经验,历任核心研发工程师,网站技术负责人,大数据中心负责人。对系统架构,数据分析处理等大规模应用场景有丰富经验。被CSDN、阿里云社区授予博客专家称号。
展开
-
用JavaScript和HTML写出一个简单的loading加载效果插件
【代码】用JavaScript和HTML写出一个简单的loading加载插件。原创 2024-06-02 02:52:36 · 318 阅读 · 1 评论 -
Flutter开发实践:用一套代码构建多端精美应用
Flutter开发实践,用一套代码构建多端精美应用,在移动应用开发中,为了在不同平台上提供一致的用户体验,我们通常需要编写不同的代码来适应不同的操作系统和设备。但是有了Flutter,我们可以使用一套代码构建多个平台的应用,包括iOS、Android、Web和桌面。本文将介绍如何使用Flutter来构建一套代码适配多端应用,并给出具体的步骤和示例代码。原创 2023-11-22 19:21:53 · 9625 阅读 · 118 评论 -
深度探索JavaScript中的原型链机制
在Javascript中,每个对象都有一个指向另一个对象的链接,这个链接被称为原型链。原型链是Javascript的一种继承机制,它通过链接对象的原型对象来实现属性和方法的继承。具体来说,当我们访问一个对象的属性或方法时,如果该对象自身没有这个属性或方法,Javascript引擎就会沿着原型链向上查找,直到找到对应的属性或方法,或者到达原型链的顶端(null)。Javascript的原型链是一种继承机制,通过链接对象的原型对象来实现属性和方法的继承。原创 2023-08-31 22:46:09 · 696 阅读 · 62 评论 -
sessionStorage、localStorage、cookie你真的会用么
浏览器的存储通常分为两类:会话存储和本地存储。,可以将数据存储于浏览器中的对象中,这些数据只在同一个浏览器窗口(或标签页)被创建并且加载了相同的页面时才被保留,不同的页面之间无法共享sessionStorage中的数据。(或标签页)的生命周期内,关闭窗口后中存储的数据会被清除。存储的数据仅限于字符串类型,即使存储的是数字、布尔值等其他类型的数据,也会被转换为字符串类型。只能在客户端使用,无法通过服务端设置和获取。localStorage是HTML5。原创 2023-06-09 12:05:59 · 352 阅读 · 0 评论 -
儿童节到了,我用HTML和CSS画了一个小朋友
官方告知我今天参加活动会得勋章,于是想了半天,总得创作一点东西,于是翻出来多年前的箱底技术,用CSS+HTML画一个小朋友,来过一个特殊的六一儿童节。如果有正在学习CSS和HTML技术的同学,这或许是一个比较有兴趣的小例子。祝各位小朋友节日愉快,健康成长。原创 2023-06-01 20:57:38 · 339 阅读 · 0 评论 -
用vue-full-calendar实现酒店预定管理展示
近些天有位做酒店业务朋友问到我,有没有前端比较好用的预定日历查看插件,实际上我也没有研究过,毕竟我的专长还是后端,不过迫与多年好友关系,帮他研究了一把,现在前端发展的真的是非常快,今天分享一款比较好用的预定日历展示插件,并给出主要的使用演示。大概实现的思路是,展示完整的月预定日历,并且实现点击每一个预定,弹窗展示一下具体的预定信息。原创 2023-05-31 23:07:22 · 1551 阅读 · 0 评论 -
Vue前端压缩图片后上传,拍照上传最佳实践
最近有一个需求,通过手机拍照后上传图片到服务器,大家应该都知道,现在的手机像素实在是太高了,随便拍一张都是10M以上,直接上传到服务器一方面是浪费存储空间,另外就是特别浪费流量,如果网络不好还很慢。所以想寻求一种前端压缩图片的方案。在网上找了很多方式效果都不好,要么是根本无法实现功能,要么就是兼容性不好。不过最终找到一个比较完美的插件。shrinkpng,话不多说,现在直接讲解怎么使用。本文基于Vue,VantUI,NPM进行演示。原创 2023-05-31 22:21:05 · 3340 阅读 · 4 评论 -
收藏 | JavaScript常见使用方法大全详细整理
String常用方法:1.substring(start, end) 用于提取字符串中介于两个指定下标之间的字符var str="Hello world!"document.write(str.substring(3)); //lo world!2.charAt(index) 返回指定索引处的字符串Var str= ”abc8ABCabc”;str.charAt(1); // b3.concat 连接多个字符串,返回连接后的字符串的副本var str1 = ”aaa原创 2020-06-13 23:19:25 · 1039 阅读 · 0 评论 -
jQuery监听多键按下的实例
<!doctype html><html lang="en"> <head> <meta name="Description" content=""> <title>jQuery监听多键按下的实例</title> <!--引入js-->原创 2018-10-26 10:47:39 · 569 阅读 · 0 评论 -
PHP结合阿里云实现网站滑块验证码的具体实例
PHP结合阿里云实现网站滑块验证码的具体实例(精华)滑块验证码样例关于滑块验证码开发准备系统编码附录滑块验证码样例关于滑块验证码滑块验证码主要的作用是方便用户进行快捷验证操作,但是同时要合理的辨别到底是机器操作还是人工操作,这一点显得难度比较大,是属于人机识别的智能开发范畴,所以相对于之前的传统4位或者6位图片验证码来说,开发起来显得更加困难,所以一般来说都会接入一些第三方的Api来辅助开...原创 2018-10-26 17:23:35 · 9262 阅读 · 1 评论 -
jQuery监听鼠标长按事件
jQuery监听鼠标长按事件<script> var timeout;//用于存储定时器的变量 //#moveLeft 表示需要监听长按事件的元素 $("#moveLeft").mousedown(function() { timeout= setTimeout(function() { alert(2) },...原创 2018-11-20 18:41:35 · 6429 阅读 · 0 评论 -
iview中在table组件中添加select(以及不成功的问题处理)
普通模式{ title: '午饭选择', key: 'lunch', width: 200, align: 'center', render: (h, params) => { return h('Select', { props:{ value ...原创 2019-03-20 16:54:35 · 1952 阅读 · 1 评论 -
HTML实现的Tab切换效果,点击滑动和触控滑动(SlideTouch插件)
在移动端的开发中,很多时候需要用手指实现滑动切换Tab的效果,相比于点击的体验效果更好,本文就在SlideTouch这个插件中提取了一个比较好的效果。可以使用Chrome直接测试。界面展示如下:实现代码如下:<!DOCTYPE html><html><head> <meta name="viewport" con...原创 2020-05-19 17:26:53 · 784 阅读 · 1 评论 -
Vue中使用axios进行数据异步交互
大家都知道在Vue里面有两种出名的插件能够支持发起异步数据传输和接口交互,分别是axios和vue-resource,同时vue更新到2.0之后,宣告不再对vue-resource更新,而是推荐的axios。今天就讲一下怎么引入axios。npm安装axiosnpm install --save axiosmain.js中导入axios 并将axios挂载到vue的原型,后面就能执行...原创 2019-04-13 08:30:19 · 1872 阅读 · 0 评论 -
jQuery 将光标定位到文本框input最后一行
<div> <input type="text" id="input_1"/></div><script>var t=$('#input_1').val();$('#input_1').val("").focus().val(t);</script>原创 2019-04-19 19:23:10 · 3935 阅读 · 0 评论 -
一篇文章,读懂TypeScript
本文转载自:https://silencesy.github.io/2019/04/29/TypeScript/TypeScript/一、准备1. 安装npm install -g typescript2. vscode自动编译项目目录终端执行tsc --init 更改tsconfig.json “outDir”: “./js”二、基础语法1.数据类型布尔值 数...转载 2019-07-27 22:41:39 · 322 阅读 · 0 评论 -
软件开发常见的一些设计模式,留着供自己研究和面试使用
说到软件开发,就不得不提到设计模式,比如大家基本上都用过什么MVC框架开发各种系统,一些好的设计模式不仅能让软件运行的更为流畅,更能让开发人员的工作效率大大提高。本文就来列举一些常用的设计模式,供大家参考收藏。工厂模式这个模式学过Java编程的一定不陌生,都听说过SessionFactory。工厂模式是一个程序设计中比较常用的模式,一般来说一个对象都是通过new方法去获取自身的一个实例...原创 2019-08-15 22:56:10 · 355 阅读 · 0 评论 -
Vue中v-cloak的作用
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style> /*属性选择器*/ [v-cloak]{ display:none; }</style>&a原创 2018-10-13 11:53:57 · 5918 阅读 · 1 评论 -
JS使用WebSocket实现与Java图形界面(swing)进行通信
背景:做项目的时候有过这样的一个需求,在访问某个网页的时候进行登录,需要浏览器获取电脑的硬件资源,但是通过浏览器直接读取的方式有些不便,所以想到使用Java开发一个图形应用界面的程序读取电脑程序通过socket通信传输给html页面用于验证。写在前面:在Java服务器这端开发中,使用到一个jar包,Java-WebSocket-1.3.0.jar,首先引入这个包,这个核心包就是用来复制Java...原创 2018-09-12 18:11:37 · 4031 阅读 · 1 评论 -
Js或者jQuery向浏览器中写入和读取cookie
<script>//浏览器端设置cookie,value必须是一个字符串,如果存入对象可以存一个json字符串function setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); d...原创 2018-09-12 17:21:04 · 3036 阅读 · 0 评论 -
HTML一个极其简单实用的浏览器加载效果
需求分析:在wap/pc浏览器界面中,为了增强用户的体验效果,在进行数据操作的时候,通常需要一个加载效果来提示用户等待,但是很多时候为了这么一个效果回去引用一个插件显得相当冗余,因此这里提供一个方便的效果,在当前页面就能做到提示效果,仿苹果加载提示,快来试试吧!代码呈现:<!doctype html><html lang="en"> <head>...原创 2017-12-25 11:42:52 · 3599 阅读 · 0 评论 -
HTML六宫格转盘抽奖页面设计,选项区块为自定义文字
本文演示一个六宫格抽奖的事例,网上也有很多模板,不过背景都是一整张图片,无法自定义内容,本文就给出可以自定义文字内容的的抽奖页面。<!DOCTYPE html><html slick-uniqueid="4"><head><meta http-equiv="Content-Type" content="text/html; charset=UT...原创 2018-01-01 22:07:54 · 1793 阅读 · 0 评论 -
jQuery使用AJAX实例
登录实例 function login(name,password){ $.ajax({ url:"/user/login",//url地址 dataType:"json",//返回的数据类型 type:"post",//发起请求的方式 data:{ 'name':name, 'password':passwor原创 2018-01-02 09:25:03 · 256 阅读 · 0 评论 -
HTML百度地图实例:google地图坐标和百度地图的相互转化
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px;width:100%;} #r-result{width:100%; font-size:14px;} 城市名定位 经度: 纬度: // 百度地图API功能 var原创 2017-12-28 23:01:07 · 1624 阅读 · 3 评论 -
Js百度地图综合实例,定位当前位置,查找周围店铺,点位追踪
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="t...原创 2017-12-28 23:07:04 · 5344 阅读 · 1 评论 -
HTML分享内容到QQ,微信,微博等平台
<html> <head> <title>Share function</title> <meta charset="utf-8"/> </head> <body> <div class="bdsharebuttonbox" data-tag="share_1"> <...原创 2017-12-28 23:11:24 · 15207 阅读 · 0 评论 -
Js控制网页滑动的时候顶部导航条变成半透明实例
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <!--引入jQuery--> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script...原创 2017-12-29 15:48:59 · 3975 阅读 · 0 评论 -
Js获取当前的日期和时间
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>获取当前时间</title> </head> <body> <script type="text/javascript"> /**...原创 2018-01-17 09:31:03 · 32714 阅读 · 0 评论 -
Js获取当前星期几
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>获取当前星期</title> </head> <body> <script type="text/javascript"> /**...原创 2018-01-17 09:36:13 · 15181 阅读 · 0 评论 -
jQuery生成二维码实例
jQuery生成二维码实例 function newCode(str){ var qrcode = new QRCode(document.getElementById("code"), { width : 200, height : 200 }); qrcod原创 2018-01-25 18:29:10 · 523 阅读 · 0 评论 -
jQuery/Js复制文本到剪贴板
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery/Js复制文本到剪贴板</title> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jque...原创 2018-01-25 18:39:55 · 23163 阅读 · 5 评论 -
Js防止网页被别人iframe嵌套
方式1:判断当前页面的访问地址和浏览器窗口顶部的是否一致if (window.top != window.self) { top.location.href = "你的url";}方式2:if(self.frameElement && self.frameElement.tagName == "IFRAME"){ //相关处理}...原创 2018-01-28 21:26:10 · 1755 阅读 · 0 评论 -
PHP或者JavaScript获取当前页面完整URL的方法
使用PHP:#不带参数$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];#带参数$url2='http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];使用JavaScript:var topUrl=to原创 2018-01-29 16:24:11 · 231 阅读 · 0 评论 -
jQuery获取iframe中的元素,在iframe中获取父窗体的元素
在父窗口中获取iframe中的元素 方式1:格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1方式2:格式:$("#iframe中的控件ID",document.fr转载 2018-01-30 15:28:57 · 8174 阅读 · 0 评论 -
微信内打开网页跳转回之前的界面,让之前的页面刷新
在跳转之前的页面中加入以下代码window.onpageshow = function(event){ if (event.persisted) { window.location.reload(); } }原创 2018-03-20 16:29:14 · 4626 阅读 · 0 评论 -
jQuery判断滚动条滚动到顶部和底部
//底部$(window).scroll(function(){ var viewHeight =$(window).height();//可见高度 var contentHeight =$('.list_box').get(0).scrollHeight;//内容高度 var scrollHeight =$(window).scrollTop()...原创 2018-05-04 15:51:47 · 810 阅读 · 0 评论 -
jQuery 获取canvas里面的base64的二维码图片地址,并显示在img中
大家知道一款很火的二维码生成工具qrcode.js,这是一款基于jQuery的二维码生成插件,能将任意的文字转化为一个二维码,通过canvas的方式呈现,但是有些时候我们需要取出里面的url,今天就一起来做做这个事情。<!doctype html><html lang="en"> <head> <meta name="Description"...原创 2018-08-06 10:11:48 · 3203 阅读 · 0 评论 -
Js(基于jQuey)网页端压缩图片后上传服务器
问题前述:为了保证逻辑更清晰,文章采用不少的文字解析,如果你比较紧急,可以不用看文字直接浏览代码呈现部分。问题背景:最近有做到一个需求,用户实名认证上传身份证,一般情况下直接通过手机拍照上传这样的图片很大(大约2-4M),一方面浪费服务器带宽,另外一方面上传的速度很慢,体验效果也不是很好。解决方案:前端进行图片预处理,先缩放一下图片之后再上传到后端处理。思考过程:(1)目前浏览器上...原创 2017-12-25 10:06:32 · 1726 阅读 · 0 评论