HTML5
关注
分享
扫一扫
文章平均质量分 54
xyphf_和派孔明
全栈工程师，熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等，可独立构建多页面、单页面应用项目。
展开
-
论小程序canvas载入图片安卓机不显示drawImage无效怎么办？
小程序canvas载入图片安卓机不显示drawImage无效原创 2023-02-21 09:54:50 · 1604 阅读 · 3 评论 -
10个好用的 HTML5 特性
在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。detais 标签<details>标签向用户提供按需查看详细信息的效果。如果需要按需向用户显示内容，简单的做法就是使用此<details>标签。默认情况下，它是收起来的，打开后，它将展开并显示被隐藏的内容。事例：<details> <summary>Click Here to get the user details</summar原创 2020-10-12 08:33:55 · 256 阅读 · 0 评论 -
vue打印局部区域样式CSS错乱不生效
最近vue项目要实现打印网页中局部区域的要求，但是用下列方式的时候显得样式全部都没有作用上 printContent(){ let subOutputRankPrint = document.getElementById('print'); // 要打印区域的元素id console.log(subOutputRankPrint.innerHTML); let newContent =subOutputRankPrint.innerHTML; le原创 2020-09-17 14:13:28 · 3262 阅读 · 1 评论 -
HTML5动画-翻转音乐盒效果动画
HTML5动画-翻转音乐盒效果动画原创 2017-07-06 10:03:09 · 1816 阅读 · 0 评论 -
4.运动 transition：时间 属性 运动形式 延迟时间 - HTML5&CSS3.0基础部分-xyphf
4.运动 transition：时间 属性 运动形式 延迟时间 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 12:05:05 · 1610 阅读 · 0 评论 -
3、按钮 - HTML5&CSS3.0基础部分-xyphf
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>按钮</title><style>#div1{width:200px;height:50px;line-height:50px;text-align:center;border:1px solid #000;font-size: 30px;原创 2017-07-04 12:02:55 · 425 阅读 · 0 评论 -
2、阴影 - HTML5&CSS3.0基础部分-xyphf
2、阴影 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 12:01:20 · 386 阅读 · 0 评论 -
2、百分比 - HTML5&CSS3.0基础部分-xyphf
2、百分比 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:57:48 · 381 阅读 · 0 评论 -
1.圆角 - HTML5&CSS3.0基础部分-xyphf
1.圆角 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:55:56 · 364 阅读 · 0 评论 -
14.before_after - HTML5&CSS3.0基础部分-xyphf
14.before_after - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:52:47 · 604 阅读 · 0 评论 -
13、层次选择器 - HTML5&CSS3.0基础部分-xyphf
13、层次选择器 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:49:47 · 788 阅读 · 0 评论 -
12、其他伪类选择器 - HTML5&CSS3.0基础部分-xyphf
12、其他伪类选择器 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:46:27 · 306 阅读 · 0 评论 -
11、伪类选择器 - HTML5&CSS3.0基础部分-xyphf
11、伪类选择器 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:43:15 · 316 阅读 · 0 评论 -
10、选择器 - HTML5&CSS3.0基础部分-xyphf
10、选择器 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:39:33 · 386 阅读 · 0 评论 -
5、透明度渐变 - HTML5&CSS3.0基础部分-xyphf
1.rgba 鼠标移上透明度变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style>#div1{width:200px;height:200px;background:red;transition:1s all ease;border:10px solid gr原创 2017-07-05 09:25:40 · 1848 阅读 · 0 评论 -
7、模糊 - HTML5&CSS3.0基础部分-xyphf
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模糊</title><style>#div1 {height:50px;line-height:50px;text-align:center;background:#ccc;}#div1 span{font-size:30px;color:原创 2017-07-05 09:27:10 · 346 阅读 · 0 评论 -
VUE 移动端自适应布局终极解决方案
大佬们欲知详情看看这个https://github.com/imochen/hotcss引入px转rem插件https://www.npmjs.com/package/px2rem-loadernpm install px2rem-loader使用方法：1、建一个viewport.js放在js目录下，将下列代码复制到里面(function( window , docu...原创 2019-04-16 17:49:53 · 16884 阅读 · 0 评论 -
下载canvas绘制的图片方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <tit原创 2018-06-01 11:19:00 · 1683 阅读 · 0 评论 -
如何创建一个svg字体图标
打开https://icomoon.io 点击右上角的IcoMoon按钮，导入我们的svg图片，选中这些图片，然后点击右下角的Generate Font按钮，来生成图标字体。我们可以看到每个图标下面有个Get Code按钮，点击一下就会出来一串代码，我们可以点击右下角的Download按钮，下载这个图标字体。在下载之前，我们可以点击上面Preferences这个按钮，我们可以在Font Name的...原创 2018-03-24 10:29:06 · 1784 阅读 · 0 评论 -
Web前端面试题 HTML 部分问题与解答
1. Q: < keygen > 是正确的HTML5标签吗？ A: 是。 < keygen > 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。是HTML5 标签。2. Q: < bdo > 标签是否可以改变文本方向？ A: 可以。 < bdo >标签覆盖默认的文本方向。<bdo dir="rtl">Here is some text</bdo>3.转载 2017-08-07 14:38:45 · 876 阅读 · 0 评论 -
JS带有惯性的拖拽，摩擦，甩动元素
JS带有惯性的拖拽，摩擦，甩动元素原创 2017-07-06 10:53:06 · 4334 阅读 · 0 评论 -
体会CSS3 perspective属性的作用
体会CSS3 perspective属性的作用原创 2017-07-06 10:35:46 · 1133 阅读 · 0 评论 -
CSS3制作3D轮播翻转动画示例
CSS3制作3D轮播翻转动画示例原创 2017-07-06 10:27:20 · 3603 阅读 · 0 评论 -
CSS3无缝轮播效果
CSS3无缝轮播效果原创 2017-07-06 10:12:45 · 4871 阅读 · 0 评论 -
HTML5&CSS3.0基础部分目录-xyphf
[置顶] CSS3.0入门笔记 [置顶] animate.css动画库使用方法介绍 [置顶] 聊一聊HTML5的表单，话说这些表单你都用过吗？ [置顶] 聊一聊HTML5存储的那些事儿！ [置顶] canvas入门系列1、H5标签 音效audio - HTML5&CSS3.0基础部分-xyphf http://blog.youkuaiyun.com/xyphf/article/details/7429原创 2017-07-05 09:47:51 · 1004 阅读 · 1 评论 -
9、class获取、添加删除状态切换 - HTML5&CSS3.0基础部分-xyphf
9、class获取、添加删除状态切换 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:35:49 · 467 阅读 · 0 评论 -
8、localstorage的应用 - HTML5&CSS3.0基础部分-xyphf
8、localstorage的应用 - HTML5&CSS3.0基础部分-xyphf原创 2017-07-04 11:33:12 · 396 阅读 · 0 评论 -
关于zepto.js的移动端拖拽写法
zepto.js;移动端拖拽;js拖拽;原创 2016-07-21 16:56:36 · 5884 阅读 · 1 评论 -
微信摇一摇js
Pandora.Grav.Mobile.js(function($) { $.fn.extend({ //移动端-重力感应 Grav: function(options) { var config = { ShakeRate: 200, //重力灵敏度原创 2016-07-29 18:52:47 · 791 阅读 · 0 评论 -
移动开发，touchstart轮播图，移动端拖拽应用
touchstart，移动开发，拖拽应用，手机轮播图原创 2016-06-20 21:17:14 · 2664 阅读 · 0 评论 -
聊一聊HTML5存储的那些事儿！
聊一聊HTML5存储的那些事儿！1、HTML5与以往的存储方式有哪些不同？ javascript的cookie使用方法介绍 JQuery的cookie使用方法 解决cookie只有4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏览器2、H5 的几种存储形式 本地存储(localstorage && sessionstorage)原创 2016-07-05 13:51:46 · 783 阅读 · 0 评论 -
localStorage的过期时间设置的方法？——和派孔明
我们都知道localStorage不主动删除,永远不会销毁，那么如何设置localStorage的过期时间呢，今天我们来一起尝试一下！ 封装localStorage过期控制代码原创 2016-07-05 13:30:22 · 38391 阅读 · 9 评论 -
关于使用HTML5本地存储图片的介绍——和派孔明
关于使用HTML5本地存储图片的介绍——和派孔明原创 2016-07-05 09:17:19 · 4363 阅读 · 0 评论 -
HTML5本地存储sessionStorage和localStorage的常用操作
HTML5本地存储sessionStorage //数据随着浏览器的关闭而销毁。localStorage//不主动删除,永远不会销毁sessionStorage的常见用法 //设置存储,用途:将value存储到key字段,用法sessionStorage.setItem(key,value); sessionStorage.setItem("nam原创 2016-07-05 00:48:44 · 1011 阅读 · 0 评论 -
CSS3.0入门笔记（二）
1.transition:运动时间 属性 运动类型 延迟时间 transition:10s all ease 2s; transition:1s width linear,2s height ease-in,1s background ease;2. 旋转 transform:rotate(角度deg); 旋转中心transform-origin:(xpx,yp原创 2016-05-08 20:11:14 · 570 阅读 · 0 评论 -
关于响应式布局的相关介绍——和派孔明
一、响应式布局简介 简单的讲，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果， 设计师提出了响应式布局的设计方案。二、响应式布局的优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题三、认识响应式布局 响应式布局又称之为媒体查询（Media Query），即通过不同的媒体类型和条件原创 2016-07-13 23:16:33 · 847 阅读 · 0 评论 -
animate.css动画库使用方法介绍
animate.css动画库简介 Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。 它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。换句原创 2016-07-13 16:45:52 · 7852 阅读 · 0 评论 -
canvas入门系列
canvas绘图canvas——注意事项一canvas简易绘图板canvas柱形图报表用canvas画一个矩形用canvas画一个弧用canvas画一个圆形进度条(canvas绘制圆形进度条)canvas绘制圆形变色进度条canvas绘制文字canvas绘制文字canvas绘制部分饼图canvas绘制完整饼图canvas鼠标移入移出鼠标/矩形区域canvas鼠标移入原创 2016-08-03 08:42:57 · 2292 阅读 · 0 评论 -
JS/JQ生成二维码插件
jquery.qrcode.min.js(function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this原创 2016-08-31 09:18:21 · 963 阅读 · 0 评论 -
iphone手机safari输入法不支持keyup事件解决方法
问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，用input监听键盘keyup事件，在安卓手机是可以的，但是在ios手机自带的输入法无效，经过查询得出以下方法;起初我想到的是使用 JQ 里的 change，但是马上排除此方法，因为 change 是在文本框失去焦点时才会触发。曲线救国一下，想到用 keydown 来解决。在安卓一切原创 2016-09-18 17:38:29 · 4031 阅读 · 0 评论