HTML5
robbie.yang
这个作者很懒,什么都没留下…
展开
-
flex 弹性盒子子元素宽度被压缩
flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,它还有另外一个值,就是0.原创 2022-06-14 14:34:00 · 2568 阅读 · 0 评论 -
CSS: 使用 svg 实现圆形进度条
使用 Vue 框架进行实现<template> <div class="mhy-audio-player" @click="onClickAudio"> <div class="mhy-audio-player__svg"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" w.原创 2022-05-19 18:53:58 · 513 阅读 · 2 评论 -
css 文本只显示两行,超出部分用省略号表示
代码块如下: overflow: hidden; overflow-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;原创 2022-01-07 15:10:36 · 1049 阅读 · 0 评论 -
【解决方案】H5 页面滚动穿透 overflow:hidden 失效
在h5页面上,如果想要让页面禁止滚动。一般通过给 body 元素 overflow:hidden;进行设置。但是,在部分安卓机上,上述操作并不会生效。因此,我们通过 fixed 布局来解决这个问题。当我们想要禁止页面滚动时,设置下面的属性,即可生效:// 设置 fixed 布局document.body.style.position = 'fixed';document.body.style.height = '100%';document.body.style.width = '100%.原创 2020-08-17 18:33:54 · 1911 阅读 · 0 评论 -
模板引擎:二、实现一个Json解析器
2.Js实现Json解析器前言 本文主要对Json解析器的实现进行探讨。 如果想深入了解其原理,可以参考上一篇文章:模板引擎:一、理解Json解析器工作原理项目github地址:https://github.com/yang657850144/parseJson案例说明例如:拿一段最简单的Json字符串举例(“{ “a”: 1 }”),要将其解析为JSON对...原创 2018-07-21 23:29:39 · 1856 阅读 · 0 评论 -
Ajax:一、Asynchronous JavaScript and XML 原理
7.Ajax(Asynchronous JavaScript and XML) 原理简介 这是早期从服务器获取数据的一种模型结构,当需要加载新的页面或者展示部分数据时,则必须重新加载页面。这是一种极差的用户体验! 这是一种极差的用户体验! 这是一种极差的用户体验!解决什么问题 AJAX 是为了解决早期从服务端获取个别数据,不用重新加载整个页面,达到更新...原创 2018-08-02 09:53:57 · 1203 阅读 · 0 评论 -
AJAX:二、XMLHttpRequest实践
XHR(XMLHttpRequest) 实践简介 XMLHttpRequest(通常缩写XHR) 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。 Fetch API 提供了一个获...原创 2018-08-02 10:02:38 · 1133 阅读 · 0 评论 -
HTTP(二)、跨域资源共享(CORS)
2.跨域资源共享(CORS)跨域简介 当访问一个资源文件时,如果从非该资源文件所在的服务器不同域名或者端口处进行访问时,该资源会发起一个跨域请求。例如,网站A的地址是http://www.domain-a.com ,该网站中HTML页面通过 img 标签中的 src 属性请求http://www.domain-b.com/static/xxx.png 图片资源,此时,就发生了...原创 2018-09-08 15:37:19 · 5240 阅读 · 0 评论 -
浏览器请求与响应全过程详解
3. 浏览器请求与响应全过程详解前言当在浏览器上输入一个网站链接时,它是如何运行将网页内容呈现在我们的浏览器上的呢?本文旨在对www.yangoogle.com网页进行详细分析,了解浏览器展示内容的整个流程。下图是在网上检索到一个较清晰的流程图,本文通过这张图进行展开讲解:首先,对输入的url进行DNS解析(找出对端服务器ip地址)通过ip地址,建立TCP请求(三次握手协议)发...原创 2018-10-22 11:43:52 · 12597 阅读 · 2 评论 -
分享一个svg路径动画神器
svg路径动画神器 - inkscape地址:https://inkscape.org/实例预览:应用实例:http://www.yangoogle.com原创 2018-10-31 16:52:16 · 7834 阅读 · 4 评论 -
Vue2.0 实现锚点定位网页元素位置
问题描述vue2.0: 如何通过锚点定位网页元素位置?原理可以通过scrollTop属性,该属性可以获取或设置一个元素的内容垂直滚动的像素数。语法// 获得滚动的像素数var intElemScrollTop = document.querySelector('.anchor') // 通过类型定位锚点元素// 重新设值document.documentElement.scr...原创 2019-03-20 15:13:23 · 3571 阅读 · 0 评论 -
【工具库】JS常用类型检测
前言JS封装了一套常用的类型检测工具库,可以判断常见的dom对象,String以及Function对象。工具库特点通过ES6语法进行导入导出,方便使用。按需加载,只需要加载使用到的函数类型检测基本全覆盖不断进行扩充项目结构|– root (项目根目录) —| is.js (类型检测库) —| other.js (业务代码)业务代码is.js...原创 2018-06-05 20:23:50 · 897 阅读 · 0 评论 -
DOM拖拽效果源码
//引用外部文件时,需要两个参数 // seajs.use('./js/module.js',function(explorts){ // explorts.foo(); // }); window.onload = function(){ var div = document.getElementById('div'); drag(div); function drag(o原创 2016-08-07 23:58:21 · 539 阅读 · 4 评论 -
在绝对定位中进行水平垂直居中的两种方法
在绝对定位中进行水平垂直居中的两种方法1.这种方法最常用,适合固定长宽的块级元素{width:300px;height:200px;left:50%;top:50%;margin-top:-100px;margin-left:-150px;}2.这种方法应用更加广泛,适合固定以及不定长宽的块级元素{max-width:300px;max-height:20原创 2016-08-09 15:13:13 · 799 阅读 · 0 评论 -
seajs入门教程
附:seajs源码包下载点击打开链接1.seajs源码引入将下好的sea.js文件放入你的html等文件中。我的文件目录树如下:2.seajs模块定义define //这里只是定义了一个模块(module.js文件),内部的函数相当于一个闭包 define(function(require,explorts,module){//三个参数不要修改,requ原创 2016-08-07 23:20:29 · 882 阅读 · 8 评论 -
主流浏览器的CSS hack
css hack这是一种技术手段,目的是解决不同浏览器对css解析不一致的问题,最终产生的效果就是可以跨终端,在不同浏览器中展示一致的界面效果。原创 2016-09-21 20:45:26 · 440 阅读 · 0 评论 -
StateMan:创建一个简单的SPA实例(二)
这个实例是在实例一的基础上进行增加的一些新的功能<!DOCTYPE html><html><head> <title>stateman路由测试</title> <script type="text/javascript" src="../js/stateman.js"></script></head><body> <h1>打开控制台console来查看日志信息</h1原创 2017-02-27 17:35:15 · 933 阅读 · 0 评论 -
HTML规范文档
前言代码进行统一有效的管理,编码进行规范性要求。统一使用html5标准原创 2017-09-23 17:03:11 · 372 阅读 · 0 评论 -
Vue(一)父子组件通信
简述 在Vue中,各种组件之间他们的作用域是孤立的,因此,无法直接彼此共享数据。一个简单的实例 当父组件的数据更新时,子组件能够同步数据子组件child.vue&amp;lt;template&amp;gt; &amp;lt;div class=&amp;quot;child&amp;quot;&amp;gt; &amp;lt;img src=&原创 2017-03-27 20:30:53 · 5086 阅读 · 0 评论 -
思维导图:HTML5和CSS3新特性
HTML5和CSS3一直作为被讨论的热门话题,虽然自己平时经常接触这些新的规范和标准,但是这些新规范具体是什么,有哪些,一时半会却说不上来。最近,在看一些前端大牛们写的文章,摘抄出来一些分享给大家,共勉。 作者: 寒泉(winter),是阿里的一位前端大神。他对知识学习的目标理解是,一曰全面,二曰准确。 用我自己的看法来讲,全面意味着要架构出一个整体的知识体系,该体系必须涵盖常用的核心功能。(可原创 2017-11-09 15:38:25 · 2361 阅读 · 0 评论 -
CSS详解:绘制三角形过程
前言 本文旨在用最简单的方式展示CSS border绘制三角形的各种方法,虽然用css 绘制三角形已经不是什么新鲜事了,不过,这篇文章将会尽力展示最全的三角形各种绘制方式。原创 2017-11-13 16:40:43 · 707 阅读 · 0 评论 -
常用默认样式初始化
常用默认样式初始化腾讯body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size原创 2016-08-06 16:56:18 · 2550 阅读 · 0 评论