web前端
lyqhn2012
知识在于分享,共同学习,共同进步!
展开
-
JS模拟自由落体活动
为了能看到效果,这里放缓了速度body{ height: 100%; position: absolute;}.circle{ width: 50px; height: 50px; background: red; border-radius: 50%; position: absolute; top: 0px;}<div cla原创 2017-04-24 16:31:58 · 925 阅读 · 0 评论 -
Vue项目下使用Sass
优势Sass是CSS预编译器,使CSS编写简单,容易维护,从而大大节省开发时间。Sass目前全面兼容CSS环境node v8.9.1npm v5.6.0Vue.js v2.xwebpack v3.10.0'安装sass的依赖包$ npm install --save-dev sass-loader$ npm install --save-dev node-sassnpm install -原创 2017-12-22 15:45:55 · 764 阅读 · 0 评论 -
jq做的图片放大器
效果预览1.放大之前 2.放大之后 $(function () { var _default = { hoverClass: 'hover-img', zoomWidth: 155, zoomHeight: 155, mainImgWidth: 310, //主图宽度 mainImgHeig...原创 2018-04-02 16:02:47 · 1006 阅读 · 0 评论 -
web app ,输入框被Android 键盘遮挡
if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTARE...原创 2018-04-03 16:45:05 · 860 阅读 · 0 评论 -
Javascript内存管理
内存泄漏在程序中,当声明变量、定义函数的时候都会使用内存。那些程序用不到,没有予以释放的内存,就造成内存泄漏.(memory leak)垃圾回收1.引用计数2.标记清除JavaScript中的内存泄漏1.循环引用造成的内存泄漏两个对象互相引用,由于他们互相引用至少一次,所以不会被回收 &lt;html&gt; &lt;body&gt; &lt;script ...翻译 2018-12-14 13:41:05 · 177 阅读 · 0 评论 -
node.js中实现批量请求
router.post('xxxx', function (req, res) { let urls = ['url1', 'url2]; // promise对象数组 let promises = batchFetch(urls, function (data) { // 数据处理 // x...原创 2019-01-03 17:13:46 · 1928 阅读 · 0 评论 -
Angular5 避免重复请求
避免用户连续的重复点击、一定时间的重复提交都可以参考从这里开始自定义指令 ThrottleClickDirectiveimport { Directive, EventEmitter, HostListener, OnInit, Output, OnDestroy } from '@angular/core';import { Subject, Subscription } fro...原创 2019-01-18 09:21:38 · 1612 阅读 · 0 评论 -
Angular5文件上传及进度报告、文件下载
今天做文件上传时的一些经验,我觉得有必要分享一下,在官网上也能找到实例import { Component, OnInit } from '@angular/core';import { HttpClient, HttpHeaders } from '@angular/common/http';import { of, Observable } from 'rxjs';import {...原创 2019-01-08 15:28:55 · 3159 阅读 · 0 评论 -
JavaScript职责链模式
/** * 职责链模式,请求在对象之间传递,避免请求的发送者与接收者的耦合关系 */class Leader { constructor() {} // 模拟抽象方法 approval() { throw new Error('抽象方法不能直接使用'); } // 下一节点 next(nextLeader) { ...原创 2019-01-09 15:13:51 · 225 阅读 · 0 评论 -
react native开发环境搭建
安装教程简单,需要有一定的基础,仅供参考一、背景React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,简单点说就是可以用它构建原生APP二、安装配置1.软件下载以下是本机运行使用的react-native环境,所需软件需要自行下载安装 - Windows 10 专业版 - node版本 >= 4.5, now 8.9.9 - npm 3.3.3原创 2017-11-09 15:34:14 · 1141 阅读 · 0 评论 -
addEventListener与handleEvent
1 . addEventListener方法用于给指定元素添加事件监听器// 第二个参数function是指定要事件触发时执行的函数element.addEventListener(event, function, useCapture)2 . handleEvent 是实现Eventlistener的一种方式,如下<script> (function () { // 作原创 2017-09-06 10:45:54 · 757 阅读 · 0 评论 -
使用jquery.i18n.properties 实现web前端国际化
jQuery.i18n.properties 是一款jQuery插件,jQuery.i18n.properties 根据浏览器使用的语言环境来解析资源文件,当然你也可以在使用中指定语言编码。以下是资源文件示例 Messages.properties# 多余的行会自动忽略username = 成龙age = 32Messages_zh.propertiesusername = 成龙Messa原创 2017-07-07 13:42:05 · 1168 阅读 · 0 评论 -
Canvas 闪烁星空
canvas{ background: black; opacity:0.7; filter: alpha(opacity=0.7); border-radius: 50%;}#myCanvas{ position: absolute; bottom: 0; right: 0; top: 0; left: 0;}#myC原创 2017-04-24 16:47:21 · 1926 阅读 · 0 评论 -
JavaScript 一些使用方法
1.jq 另一种取值方式// var val = $input.val()var val = $("#input")['val'] 2.正则表达式html模板的运用<div id="template"> <div>{{ firstName }} {{ lastName }}</div></div>var mjson = { firstName:"lyqhn2012 ",原创 2017-04-19 17:05:10 · 504 阅读 · 0 评论 -
ES6入门学习笔记
阮一峰老师-ECMAScript 6 入门的学习笔记<!DOCTYPE HTML><html><head> <script type="text/javascript"> // let 声明的变量,只在命令所在的代码块内有效。 { { let a = 10; var b = 1原创 2017-05-09 10:37:19 · 478 阅读 · 0 评论 -
scrollTop、offsetTop、offsetHeight等相对位置介绍
scrollTop 滚动条相对于其顶部的偏移offsetTop 返回当前元素上边缘距离offsetParent元素的距离,返回值是数字,单位是像素。offsetHeight 返回当前元素的高度,包括内边距和边框event.clientX,event.clientY 相对于浏览器窗口的(x,,y)坐标,不包括工具栏和滚动条event.pageX, event.pageY 相对于文档的(x,,原创 2017-04-27 15:01:38 · 725 阅读 · 0 评论 -
CSS
1.限制在一个块元素显示的文本的行数.box-line-clamp_desc { color: #999999; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orie原创 2017-04-21 13:56:36 · 351 阅读 · 0 评论 -
vue.js国际化 vue-i18n插件的使用
安装方法1.使用CDN直接引用<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>2.NPM$ npm install vue-i18n3.Yarn$ yarn add vue-i18n使用方法在这里只介原创 2017-06-20 09:25:22 · 15069 阅读 · 0 评论 -
js解析XML文件
// js 解析xml,url为xml文件的路径function loadXMLDoc(url) { var xmlhttp; var txt, x, xx, i; if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLH原创 2017-06-21 13:19:12 · 399 阅读 · 0 评论 -
JS 实现抛物线运动
JS实现简单的抛物线动画,需要的童鞋可以参考下<div class="content"> <div class="slider"> <div class="icon"> <span class="fa fa-circle" id="cart" ></span> </div> </div></div><scrip原创 2017-07-04 10:12:58 · 3840 阅读 · 0 评论