web前端
Rand Tsui
东方欲晓,莫道君行早。
展开
-
锚点平滑滚动之scrollIntoView
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>锚点平滑滚动</title> <style> #d1{ background-color: #FFFCF0; height: 400px; } #d2{ .原创 2021-09-14 16:07:31 · 368 阅读 · 0 评论 -
【JavaScript】键盘按键+组合键
window.document.onkeydown = e => { //console.log(e); if(e.ctrlKey && e.key === 'c'){ console.log('copy'); } if(e.ctrlKey && e.key === 'v'){ console.log('paste'); } ...原创 2021-02-28 20:58:05 · 695 阅读 · 0 评论 -
【CSS】弹出框 文字一行水平居中 多行左对齐
.parent{ width: 10rem; height: 6rem; display: flex; justify-content: center; align-items: center;}.child { max-width: 80%; line-height: 1.4rem; text-align: left; word-wrap: break-word;}原创 2021-02-25 11:11:27 · 388 阅读 · 0 评论 -
【JavaScript】创建类用class好还是function好
class Role{ constructor(name, age) { let a = 1; this.name = name; this.age = age; this.aa = () => { console.log(a); } } setName(name){ t...原创 2020-11-22 13:03:25 · 592 阅读 · 0 评论 -
【哪些浏览器需要兼容】2020
谷歌、新版Edge都用的最新chromium内核,不需要考虑兼容性Firefox兼容性跟谷歌差不多都很强360浏览器的chromium内核版本78qq浏览器的chromium内核版本70搜狗高速浏览器的chromium内核版本72旧版Edge对ES6有个别语法、函数不支持chromium 78 对ES6也个别不支持,不过绝大多数都正常70和72待测试基本就考虑这些就行了...原创 2020-11-22 00:49:54 · 340 阅读 · 0 评论 -
【web前端】viewport width=1280
手机端总宽度1280,页面显示完整,跟预想效果一样,但是文字有点小。原创 2020-09-29 10:17:48 · 370 阅读 · 0 评论 -
【CSS特效】3D翻转效果
前言:尽管现在不是所有浏览器都支持(edge、ie不支持),但相信总有一天会支持<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-s...原创 2019-12-19 09:46:40 · 303 阅读 · 0 评论 -
【web性能优化】压缩html、css、js,NodeJS工具
工具https://github.com/kangax/html-minifierhttps://github.com/fmarcia/UglifyCSShttps://github.com/mishoo/UglifyJS2使用const fs = require('fs');const minify = require('html-minifier').minify...原创 2019-10-19 22:54:03 · 339 阅读 · 0 评论 -
SPager 三个分页架构Demo
SPager.js/* SPager 调用说明 *///第一步 建立 SPager对象 var spager = new SPager(4); 参数为 每页 item 个数 PageSize//第二步 必须重写 SPager 的 ReturnParentElement 方法 ,返回 item 的父元素//第三步 必须重写 SPager 的 ReturnGifUrl 方法 ,返回 加载动画原创 2016-07-30 12:51:27 · 1370 阅读 · 0 评论 -
JS整理 insertAdjacentElement、insertAdjacentHTML、insertAdjacentText
document.addEventListener("DOMContentLoaded", function () { var div = document.getElementById("d"); var bt = document.getElementById("bt"); bt.onclick = function (e) { //div.insert原创 2016-07-29 10:38:01 · 3109 阅读 · 0 评论 -
H5调用摄像头
html5概念啥的就不废话了,不知道的 百度, 谷歌一堆。。今天学了学html5中的Canvas结合新增的标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要转载 2016-07-21 12:40:34 · 10629 阅读 · 3 评论 -
Ajax 请求 asp.net mvc 的View
虽然很简单 , 但用处很大后台代码public ActionResult Ajax_View() { return View("Test_Ajax_View"); }cshtml@{ Layout = null;}@for (int i = 0; i < 5; i++){ i}原创 2016-07-28 17:02:55 · 1065 阅读 · 0 评论 -
页面重绘和回流以及优化
原文:http://www.css88.com/archives/4996在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。1. 浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中转载 2016-07-28 16:01:25 · 638 阅读 · 0 评论 -
JS 手机端滑动分页插件 SPager 最新版
JS/* SPager 调用说明 *///第一步 建立 SPager对象 var spager = new SPager(4); 参数为 每页 item 个数 PageSize//第二步 必须重写 SPager 的 ReturnParentElement 方法 ,返回 item 的父元素//第三步 必须重写 SPager 的 ReturnGifUrl 方法 ,返回 加载动画gif图片原创 2016-07-28 14:09:16 · 7393 阅读 · 0 评论 -
JS 窗口滚动条理解
首先 window.innerHeight 表示浏览器可见或可用高度如果body中的元素总高度超越上面的高度,默认body会出现滚动条 那么 document.body.scrollHeight 就表示 所有元素总高度 它当然大于 window.innerHeight还有 document.body.scrollTop 就表示 当前页面相对于总高度的位置,有的文档也说原创 2016-07-28 10:24:45 · 1750 阅读 · 0 评论 -
JS 之 appendChild 与 innerHTML
问题:手机滑动分页,每次向下滑到低,就会请求数据并增加 n 个 item ,至于这个 item是什么,item 就是一类相似的 元素,它们有共同的父元素,那么,我要如何添加这几个item?方式有两种,第一种很简单,修改父元素的innerHTML,原来的加上新的。第二种,用appendChild方式,有几个加几个。以上两种方法比较第一种方式会删除父元素里面内容,然后重新写入所有ite原创 2016-07-27 16:42:31 · 3041 阅读 · 0 评论 -
如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学。(如果你怀疑我的资历, A Wizard's Lizard这个游戏的半数以上开发是由我完成的)我们直接来看源码里的game.js,当然你也可以在线体验一下游戏先。游戏截图创建画布//转载 2016-07-27 13:31:09 · 4455 阅读 · 3 评论 -
Canvas 与 双缓冲 相关文章
作者:严天宇链接:http://www.zhihu.com/question/25036663/answer/29881637来源:知乎著作权归作者所有,转载请联系作者获得授权。对于CANVAS绘制性能提高问题,可以考虑使用“双缓冲”技巧。CANVAS图像传统绘制是这个样子的:(1)在可见画布上画出一个圆。(2)在可见画布上画出一个三角。(3)在可见画布上画出一转载 2016-07-27 13:13:24 · 1864 阅读 · 1 评论 -
原生js ajax get与post区别
get方式要么不发送数据,要么把发送的数据写在url 后面send 方法里面不带字符串后台通过 querystring 获取数据post方式一定发送数据,不发送数据干嘛用post发送的数据格式如下a=1&b=cxc&c=43上面字符串作为send方法的参数发送选同步还是异步,现在chrome浏览器同步会警告,因为影响用户体验各个浏览器兼容性问原创 2016-07-14 10:37:49 · 1519 阅读 · 0 评论 -
js 图片轮播插件
本插件调用很简单,显示效果也很简单,绝大部分工作用js完成,这是第一版,有个小问题需要改进一下,改进版可以满足传参,一个窗口显示多个图片轮播,这个由读者完成HTML页 Pictures2 CSS页*{ margin:0px; padding:0px;}body { background-co原创 2016-06-28 17:32:13 · 493 阅读 · 0 评论 -
性能更好的js动画实现方式——requestAnimationFrame
原文: http://www.cnblogs.com/2050/p/3871517.html用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性,比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。所以有的转载 2016-06-06 09:05:08 · 392 阅读 · 0 评论 -
HTML5 的 SSE 在 asp.net mvc 5 上的运行测试结果
当时我就在想 服务器端如果真能自动单向推送 而不需要请求 那么服务器不就逆天了 可以无节制得向客户端发送数据岂不是违背了http协议 想想都觉得不太可能 后来自己跑了一下 代码如下 Chrome 上面运行 大约每三秒变化一次network 中明明显示 不断发送 get 请求,这跟ajax轮询有啥区别,官方岂不是在逗我,只能说看起来像推送,原原创 2016-05-23 17:19:43 · 1561 阅读 · 1 评论 -
HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 感谢作者HTML5 LocalStorage 本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4K转载 2016-05-23 13:08:44 · 450 阅读 · 0 评论 -
jQuery源码解读二
例:$(document).ready(function () { $("p").click(function () { $(this).hide(); });});在开始进入程序之前,先要说明一点,jQuery代码庞大又绕,虽然语法上能看得懂,算法上也没问题,但是即使这样,如果凭自己一步步去计算这个流程,然后得到它的意图,会很费时间,有时候,原创 2016-06-04 12:48:15 · 395 阅读 · 0 评论 -
js 手机端滑动分页SPager 基本示例
HTML页 SPager CSS页*{ margin:0px; padding:0px;}body{ }div{ height:80px;}#loading{ height:66px;}JavaScript页(function () { window.原创 2016-07-21 12:45:23 · 6574 阅读 · 1 评论 -
Web前端应该从哪些方面来优化网站
原文:https://www.zhihu.com/question/21658448不知道是哪位大牛的文章,转过来回答。前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得转载 2016-08-11 08:55:59 · 577 阅读 · 0 评论 -
【css】响应式布局结构
/* 横屏 - iPhone X 系列*/@media screen and (max-aspect-ratio: 217/100){ .a{}}/* 横屏 - PC和正常手机*/@media screen and (max-aspect-ratio: 178/100){ .a{}}/* 横屏 - 平板设备*/@media screen and (max-aspect-ra...原创 2019-09-12 11:35:31 · 252 阅读 · 0 评论 -
常见竖屏设备屏幕宽高比
平板设备768 / 1024 = 0.75834 / 1112 = 0.751024 / 1366 =0.7496339677891654465592972181552正常手机320 / 568 =0.56338028169014084507042253521127360 / 640 =0.5625375 / 667 =0.56221889055472...原创 2019-09-12 11:17:47 · 10905 阅读 · 0 评论 -
【JavaScript】获取可见区域宽高兼容性问题
获取宽度window.innerWidth 这个没有问题获取高度window.innerHeight 这个在华为平板测出有问题 其他浏览器没问题$(window).height() 这个jQuery的没问题window.document.documentElement['clientHeight'] //这个是...原创 2019-08-01 10:05:46 · 230 阅读 · 0 评论 -
【JavaScript】String 转 ArrayBuffer
function String2ArrayBuffer(str, cb) { var b = new Blob([str]); var f = new FileReader(); f.onload = function(e) { cb(e.target.result); } f.rea...原创 2019-07-21 22:12:53 · 8378 阅读 · 0 评论 -
【webpack】我的配置文件
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = env => { let appName = 'pk'; return { //devtool: env?'':'source-map', ...原创 2019-07-24 12:14:12 · 156 阅读 · 1 评论 -
【CSS】利用宽高比例的媒体查询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding...原创 2019-07-24 12:12:43 · 1142 阅读 · 0 评论 -
【JavaScript】设备类型检测
GitHub地址:https://github.com/matthewhudson/current-device原创 2019-06-19 17:44:59 · 306 阅读 · 0 评论 -
WebSocket 前端代码示例
var ws = new WebSocket("ws://localhost:8080");ws.onopen = function() { ws.send("hello");};ws.onmessage = function (e) { console.log(e.data);};ws.onclose = function() { console.log...原创 2019-06-19 10:57:59 · 4949 阅读 · 0 评论 -
WebView 调试方法
使用remotedebug-ios-webkit-adapter工具GitHub 地址:https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter安装之后-----浏览器输入:chrome://inspect注:打开该页面有时候需要连接vpn,该页面可以设置端口,与下个步骤的端口要一致下一步,命令行输入:...原创 2019-06-07 00:13:34 · 1321 阅读 · 0 评论 -
WebView 之 JavaScript 与 native 的交互
首先必须已经搭建好了安卓开发环境添加html文件在 app -> src -> main 下创建 assets 目录,然后在该目录下创建 html 文件activity_main.xml 布局代码<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:androi...原创 2019-06-07 00:07:48 · 162 阅读 · 0 评论 -
JS 上传文件之FormData 与Blob 对象
SA $.domLoad(function () { var formdata = new FormData(); formdata.append("a","ffdfdf"); formdata.append("file1",new Blob(["Hello World!"],{t原创 2017-03-20 17:56:08 · 13769 阅读 · 0 评论 -
JS 文件上传之 FileReader
SA $.domLoad(function () { $("#bt").onclick = function () { var file = document.createElement("input"); file.setAttribute("type","fil原创 2017-03-20 17:25:11 · 3305 阅读 · 0 评论 -
昨天面试第一题
此题我错了 还是too young too simplevar a =10;var f = function(){ var a = 100; alert(a); alert(this.a); var a; alert(a);}f();问:输出什么今天自己又验证了一下,得出正确答案第一个a=10 是window对象的a第二个 a=100原创 2016-08-11 10:20:53 · 652 阅读 · 0 评论 -
昨天面试遇见这样一个js 正则表达式题
var s1 = "get-element-by-id"; 给定这样一个连字符串,写一个function转换为驼峰命名法形式的字符串 getElementById虽然我知道 把 -e -b -i 分别转换成大写就可以,但是由于相关字符串正则api不太熟一时写不出来后来查一下就很容易明白了var f = function (s) { return s.repla原创 2016-08-11 09:39:21 · 2637 阅读 · 0 评论