html
html and html5
最帅扫地僧
年少轻狂
展开
-
FE使用art-template
使用 template 时,第一个参数为模板的 id。第二个参数为传递到模板的数据,没有数据传递{},但是不要不传,否则会出现意外,文档地址最基础的使用<body> <div id="box"></div> <script type="text/html" id="boxTmp"> 姓名:{{name}} </script> <script src="./template-web.js"><..原创 2021-01-04 08:48:49 · 198 阅读 · 0 评论 -
括号生成
准备阶段1–判断括号字符串是否正确闭合<script> function isRight(arr) { let result = []; for (let i = 0; i < arr.length; i++) { let stack = []; let str = arr[i]; for (let k = 0; k < str.length; k++) { if (stack.le原创 2020-10-21 15:06:57 · 79 阅读 · 0 评论 -
利用canvas给图片打马赛克
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片打码</title> <style> canvas { border: 1px solid原创 2020-08-05 20:22:35 · 716 阅读 · 0 评论 -
获取画布上的任意一个坐标对应的像素点的颜色值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>像素操作</title> <style> canvas { border: 1px solid原创 2020-08-05 20:20:32 · 1793 阅读 · 0 评论 -
通过操作像素点改变画布颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>像素操作</title> <style> canvas { border: 1px solid原创 2020-08-05 20:19:45 · 607 阅读 · 0 评论 -
canvas之伸缩变换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放案例</title> <style> canvas { border: 1px solid原创 2020-08-03 21:36:09 · 326 阅读 · 0 评论 -
记录一次项目中使用canvas绘制图形
目标import React from "react";import { Link } from "react-router-dom";import { PropTypes } from "prop-types";import "./header-nav.scss";class HeaderNav extends React.Component { constructor(props) { super(props); this.state = { initDeg原创 2020-08-02 08:41:34 · 188 阅读 · 0 评论 -
记录canvas学习--签名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>签名案例</title> <style> canvas { border: 1px solid r原创 2020-08-02 08:37:34 · 105 阅读 · 0 评论 -
记录一次canvas学习--绘制时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>钟表案例</title> <style> canvas { border: 1px solid原创 2020-08-02 08:36:31 · 111 阅读 · 0 评论 -
canvas生成刮刮乐~~~
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ma原创 2020-06-18 13:28:42 · 154 阅读 · 0 评论 -
Echarts 配置主副标题【转载】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- jquery cdn引入 --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- echar转载 2020-05-21 13:17:56 · 2298 阅读 · 0 评论 -
html-浮动、盒模型、布局方式
浮动概念: 浮动就是让块级标签不独占一行使用场景:让块级元素在排在一行原理:让浮动的元素脱离标准文档流清除浮动:在浮动的元素后面添加一行多余标签,控制其样式为:clear:both;给浮动的父级元素设置:overflow: hidden;PS:该属性有两个作用,一个是超出部分隐藏,另一个是清除浮动。给浮动的父级元素设置伪类:.wrapper:after {content:...原创 2020-03-28 13:37:54 · 479 阅读 · 0 评论 -
如何设置checkbox和radio的大小
<input type="checkbox" style="zoom: 220%;"><input type="radio" style="zoom: 220%;">原创 2019-06-25 18:26:28 · 15346 阅读 · 1 评论 -
水平垂直居中的几种常见实现方式
案例布局1<style tyle='text/css'> .parent { width: 500px; height: 500px; border: 1px solid #ccc; } .child { width: 200px; height: 200px; border: 1px solid #00f; }</style><...原创 2019-04-12 17:40:53 · 668 阅读 · 0 评论 -
reflow(回流或重排)and redraw or repaint(重绘)
浏览器下载HTML文档到显示在页面上这是一个复杂的过程,浏览器首先会根据html构建一个DOM树,紧接着再去解析css生成一个样式结构体,DOM树和样式结构体组合生成一个渲染树,浏览器再根据渲染树进行显示页面。重绘,当一个元素的样式发生改变,比如背景颜色改变,比如字体颜色改变,比如边框颜色改变等,诸如以上这些会触发浏览器的重绘。重排(回流),窗口的尺寸大小,操作DOM,比如添加和删除DOM...原创 2019-03-26 21:51:23 · 148 阅读 · 0 评论 -
H5离线存储
离线存储H5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接的时候进行访问,轻松创建web应用的离线版本离线应用和网页缓存都是为了更好的缓存各种文件以提高读取速度离线于缓存对网络环境的要求缓存依赖于网络的存在,离线在离线状态下仍然可以缓存主要缓存当前页面的内容,离线主要走缓存,只要设置缓存该文件的页面,都能在离线状态下读取该文件离线存储的意义:最突出的功能...原创 2020-03-14 14:57:56 · 1320 阅读 · 0 评论 -
H5地理位置信息
地理信息定位用户的位置,使用HTML5 Geolocation API用于获得用户的位置但是必须要获取用户的同意,否则不行主要使用navigator.geolocation.getCurrentPosition(success, error, options)<!DOCTYPE html><html lang="en"><head> &l...原创 2020-03-14 14:57:14 · 227 阅读 · 0 评论