前端开发
爱玲姐姐
大家好,我是计爱玲,英文名:Cathy,是一名前端开发工程师,热爱解锁各种前端新技术。我的爱豆是王一博,当然我也想认识更多同行的帅哥,
我的微信jal517486222,欢迎加我好友交流编程技术*^_^*
个人网站:https://jiailing.com
展开
-
大前端学习--开发脚手架与自动化构建工作流封装
开发脚手架与自动化构建工作流封装去年6月24号开始工作,到今天刚好一周年了,纪念一下,分享最近学习的前端工程化笔记。一、前端工程化前端工程化是指遵循一定的标准和规范,通过工具去提高效率、降低成本的一种手段。1. 前端开发中遇到的问题想要使用ES6+新特性,但是兼容有问题想要使用Less/Sass/PostCSS增强CSS的编程性,但是运行环境不能直接支持想要使用模块化的方式提高项目的可维护性,但运行环境不能直接支持部署上线前需要手动压缩代码及资源文件,部署过程需要手动上传代码到服务器多人原创 2020-06-24 17:41:24 · 1549 阅读 · 0 评论 -
前端自动化构建工具--Plop
前端自动化构建工具 ---- Plop 前言:周末在家学习了一些前端自动化构建工具,Generator、Plop、Grunt、Gulp,我还以为目前用不到这些工具,没想到周一一上班看到这周任务是要开发N个新模块,我就感觉我该求助于某个自动化工具了????????我要开发的每个模块的结构骨架都非常相似,就可以使用Plop来实现自动化了,Plop旨在根据模板文件自动化创建组件,而不是一个完整的大型应用,这是非常符合我的预期的????????????,接下来我就来介绍一下Plop如果帮助我们在开发过程中提高工原创 2020-06-01 18:00:51 · 5419 阅读 · 3 评论 -
大前端学习--TypeScript
TypeScript一、JavaScript1. 弱类型、动态语言的缺陷程序中的异常在运行时才能发现类型不明确函数功能会发生改变对对象索引器的错误用法2. 强类型的优势错误更早暴露代码更智能,编码更准确重构更牢靠减少不必要的类型判断二、Flow1. Flow是JavaScript类型检查器// : number 叫做类型注解function sum (a: number, b: number) { return a + b}console.log(s原创 2020-05-19 13:39:39 · 1245 阅读 · 0 评论 -
大前端学习--异步编程
异步编程一、JS是单线程语言JS执行环境找那个负责执行代码的线程只有一个执行任务的模式有两种:同步模式、异步模式。二、Promise1. 基本使用// Promise 基本演示const promise = new Promise(function (resolve, reject) { // 这里用于兑现承诺 // resolve(100) // 承诺达成 reject(new Error('promise rejected')) // 承诺失败})promise.t原创 2020-05-19 13:37:35 · 1102 阅读 · 0 评论 -
大前端学习--ES6 新特性
ES6 新特性一、ECMAScript 20151. ES2015共有三种作用域全局作用域函数作用域块级作用域(新增)2. 变量声明:let constlet const都是块级作用域,let是变量,const是常量for点击事件var element = [{}, {}, {}]for(var i = 0; i < element.length; i++) { element[i].onclick = function () { // i是全局变量,已经变成了原创 2020-05-19 12:31:26 · 1302 阅读 · 0 评论 -
JS中FileReader类(H5新特性)实现文件上传时的及时预览功能
测试图片也用我啵的美照~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2020-03-07 21:44:43 · 961 阅读 · 1 评论 -
CSS3 transition属性 实现过渡动画效果
CSS3:transition属性transition: 要过渡的属性 花费时间 运动曲线 何时开始;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>过渡动画</title> <style> div {...原创 2020-02-14 14:34:01 · 1098 阅读 · 0 评论 -
echarts表格自适应屏幕宽度
在setOption()后面加上一句window.onresize = app.resize;亲测可用原创 2018-11-15 16:21:17 · 1868 阅读 · 0 评论 -
怎样用js实现为一段HTML元素设置随机颜色字体(亲测可用)
用JS为一段HTML元素设置随机颜色字体HTML中的元素&lt;p id='broadcast'&gt;testtest&lt;/p&gt;JS部分var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];function generateMixed...原创 2018-11-12 20:51:30 · 4788 阅读 · 3 评论 -
JS实现radio单选的同时,可以自定义输入值
效果图:css.radio { background-color: white; border-color: gray; color: gray; border-style: solid; border-width: thin; text-align...原创 2018-11-21 13:35:25 · 1467 阅读 · 0 评论 -
将底栏固定在网页底部的好方法 bootstrap的navbar-static-bttom
navbar-static-bottom这个类可以使其固定在网页底部,并且不随网页滚动&lt;footer class="navbar-static-bottom"&gt; testteset&lt;/footer&gt;如果需要随网页滚动,则使用navbar-fixed-bottom类&lt;footer class="navbar-fixed-bottom原创 2018-11-15 09:43:41 · 4061 阅读 · 0 评论 -
第一次使用echarts绘图(心得)
Echarts官网链接我就是用这个实例图来绘制的,突然感觉echarts用起来好简单,哈哈我下载了官方实例后,进行了相应的修改,下面是我的代码:<div class="row" id="container" style="height: 200px;width: 100%;"><div> <script type="text/javascript&qu原创 2018-12-02 20:18:49 · 3945 阅读 · 0 评论 -
PHP版本微信支付开发----电脑网站扫码支付(native)(心得、总结)
早就听说微信支付比支付宝支付的坑多,但还得得该填的填,该绕的绕, 最终我们网站的微信支付功能成功上线啦♪(^ ∇ ^*)一、手续备齐、按流程走在进行微信支付开发之前,首先你得拥有微信支付的权限。哦对了,在此之前,你还得有一个公众号(服务号), 在微信公众平台申请。进入微信公众后台后,左侧有一个微信支付,如果你想要获得微信支付功能,还需要先进行微信公众号的认证,嘻嘻(此处省略300元~~~费时...原创 2018-12-09 17:37:37 · 14847 阅读 · 35 评论 -
PHP版本对接支付宝支付接口 电脑网站 详细介绍 沙箱环境 超简单易懂
PHP版本对接支付宝支付接口 其实理顺了思路后,按照我接下来的步骤来,真的超级简单啊,为啥有那么多的朋友们折腾了那么久呢,嘿嘿,跟我走吧~我是昨天晚上洗完澡之后,大概八九点,才开始正式开工尝试去这一工程的,我去支付宝的蚂蚁金服开放平台里把各个知识点和文档大概都看了一遍,大致弄明白了要怎么操作了,建议大家看看电脑网站开发文档,忙到了夜里十二点左右,成功地用支付宝给的Demo完成了付款操...原创 2018-09-16 20:55:16 · 11521 阅读 · 23 评论 -
支持web端和移动端的拖拽排序插件 dragula
Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单,浏览器兼容性好,能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。代码演示:<script src="dist/dragula.js"></script><link rel="stylesheet" href="dist/dragula.css"><原创 2018-12-15 19:19:25 · 7861 阅读 · 7 评论 -
table导出成excel并下载,js插件tableExport.min.js
table导出成excel并下载,js插件tableExport.min.js下载地址:https://download.csdn.net/download/jal517486222/10914744html代码:&lt;button id="btnExport"&gt;下载Excel&lt;/button&gt;&lt;table id='myTable'&a原创 2019-01-13 22:35:50 · 3701 阅读 · 0 评论 -
使用node启动http-server,开启HTTP服务(mac版)
使用node启动http-server,开启HTTP服务当我们想直接在浏览器打开我们的HTML文件时,会发生以下这种错误报错信息:Access to script at 'file:///Users/mac/Desktop/test/modules/index.js' from origin 'null' has been blocked by CORS policy: Cross orig...原创 2019-09-09 22:31:19 · 2892 阅读 · 0 评论 -
点击按钮,实时更新右侧的内容 ajax技术$.post()方法同步局部刷新页面
我感觉我真的好机智啊,有些很偏的问题,百度不到的时候,真的就只能靠自己钻研了我是想通过点击按钮根据左侧框中的问题编号来更新显示右侧是弹出框中的data-content的内容(每一编号对应的名称)。我是用bootstrap中的popover弹出框来实现的,下面是菜鸟教程给出关于弹出框的案例:<button type="button" class="btn btn-warning" ti...原创 2018-11-13 12:42:44 · 2899 阅读 · 0 评论 -
h5如何实现左右滑动效果,一个滑动插件swiper就搞定
演示效果图:这是我的文件路径结构:这是index.html文件:&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot原创 2018-11-09 18:12:51 · 12311 阅读 · 0 评论 -
点击按钮button,弹出一个对话框输入数据
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> RunJS 演示代码 </title> &a原创 2018-08-06 19:06:35 · 29763 阅读 · 2 评论 -
$.post(url,data,function(val){})回调函数的参数
写这篇博客是为了纪念一下今晚如此机智的自己~ 我居然猜到了$.post(url,data,function(val){})回调函数的参数居然就是url这个PHP页面的echo值,突然好喜欢我自己,嘿嘿嘿这是我的调用$.post()函数的代码function load_collection(collection_id){if(confirm("载入本条收藏代码后将覆盖当前代码框内容,是否...原创 2018-08-07 00:00:22 · 8753 阅读 · 0 评论 -
网站头像上传(前台Ajax+后台PHP)
前台代码 portrait_upload.php:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2018-08-28 19:58:03 · 2366 阅读 · 2 评论 -
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
代码如下<!DOCTYPE html><html><head> <meta charset="utf8"> <title>js拖拽效果</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jq原创 2018-08-28 20:40:29 · 3364 阅读 · 0 评论 -
html中的div无法显示数据库中的回车字符
解决方法,给该div的stly再加一个css:white-space: pre-wrap; 这样就可以在div中显示换行啦原创 2018-08-29 19:53:34 · 3563 阅读 · 0 评论 -
Bootstrap 模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。用法通过data属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle=”modal”,同时设置 data-target=”#identifier” 或 href=”#identifier” 来指定要切换的特定的模态框(带有...原创 2018-08-29 20:02:47 · 818 阅读 · 0 评论 -
web前端经典面试题
遇到一篇不错的前端经典面试题 转载自https://blog.csdn.net/gyq04551/article/details/552543591、请谈谈你对性能优化的认识?网页内容减少http请求次数80%的响应时间花在下载网页内容(images, stylesheets, javascripts,scripts, flash等)。减少请求次数是缩短响应时间的关键!可以通过简...转载 2018-09-11 11:43:58 · 1574 阅读 · 0 评论 -
如何实现鼠标移动按钮上,按钮变颜色的效果
可以通过js来改变鼠标放在按钮上的样式:这是按钮的默认状态:<button id='btn' class=" btn btn-block btn-default">提交</button>js中可以这样写:<script> window.onload = function() { var btn ...原创 2018-09-05 15:56:32 · 12146 阅读 · 0 评论 -
jQuery实现全国高校三级下拉框
AllSchool.js下载链接index.html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>jQuery全国高校三级联动下拉选择菜单代码</title> <原创 2018-09-06 10:49:39 · 1402 阅读 · 1 评论 -
html滚动文字(marquee标签)
&lt;!doctype html&gt;&lt;html lang="en" ng-app&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"原创 2018-09-12 15:36:05 · 11082 阅读 · 0 评论 -
jquery中的plot函数的使用
调用plot函数的方法如下:var plot = $.plot(placeholder, data, options)$.plot($("#submission"), [ {label: "<?php echo $MSG_SUBMIT?>", data: d1, points: {show: true},lines:{show:true},color:"#...原创 2018-09-19 22:47:29 · 6234 阅读 · 0 评论 -
用原生JS实现maquee上下滚动公告效果
用原生JS实现maquee<!DOCTYPE HTML><html><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><head> <style type="text/css"> ul原创 2018-09-21 13:55:54 · 1506 阅读 · 0 评论 -
在JS中模拟表单的post提交,进行页面的跳转
封装为Post(URL, PARAMTERS) 函数: /**功能: 模拟form表单的提交*参数: URL 跳转地址 PARAMTERS 参数*/ function Post(URL, PARAMTERS) { //创建form表单 var temp_form = document.createElement("form"); ...原创 2018-10-18 15:41:17 · 8940 阅读 · 0 评论 -
JQuery、BootStrap实现鼠标悬浮出现下拉框
JQuery、BootStrap实现鼠标悬浮出现下拉框,并且鼠标可以进入下拉框,鼠标离开下拉框后,下拉框隐藏html 部分(bootstrap):<li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" id="dropdo原创 2018-10-19 17:49:48 · 5001 阅读 · 0 评论 -
用JQuery实现点击按钮来显示/隐藏某个div
刚开始我还在判断div的display属性是不是等于"none",来选择是show()还是hide(),现在才想起来直接用toggle()方法就可以了嘛,真的是太方便了使用jQuery的时候,千万不要忘记在HTML页面加jQuery的CDN哟<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">&l...原创 2018-10-31 16:50:58 · 2809 阅读 · 0 评论 -
在form表单提交之前执行一些js判断
在form表单提交之前执行一些js判断我刚开的时候,是用onsubmit属性的,如下所示:index.php: <h2>用户登录</h2> <form method="post" id="userForm" onsubmit="return isRemeber()"> <div class="form-gr原创 2018-11-09 14:14:37 · 10489 阅读 · 1 评论 -
Button按钮为什么无缘无故会提交form表单?
我的form表单里有好几个Button按钮,每个按钮有不同的功能,可是这些按钮居然都有提交功能,真是把我惊呆了<button class="btn btn-info " onclick="do_collection()" title="非Guest用户可收藏">收藏</button>这个问题困惑了我好几天一直百思不得其解,然后我就去查了一下button按钮的属性,...原创 2018-08-06 18:55:27 · 5853 阅读 · 4 评论