前端
关注
分享
扫一扫
文章平均质量分 66
分享一些常见的前端代码，思想和源码
evan_qb
冰冻三尺，非一日之寒
展开
-
【Html5】H5常见标签
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明文档使用的字符编码 --> &l转载 2019-01-10 13:56:17 · 517 阅读 · 0 评论 -
【js】腾讯视频接口调用
有时我们想在我们的网站上的宣传页引入一段视频，但又不想自己写，这时我们可以调用其他视频的接口，从而达到需求首先引入js文件<script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script>准备一个div，用于放置视频<div ...原创 2019-01-05 10:13:40 · 32467 阅读 · 2 评论 -
【html5】解决rem布局文字闪动的问题
css样式加上@media (min-width: 320px){html{font-size: 42.6667px;} }@media (min-width: 360px){html{font-size: 48px;} }@media (min-width: 375px){html{font-size: 50px;} }@media (min-width: 384px){html{fon...转载 2019-01-03 14:52:13 · 1504 阅读 · 0 评论 -
【js】kindeditor富文本编辑器的简单使用
首先去下载kindeditor的相关文件引入css以及js<link rel="stylesheet" href="js/kindeditor-4.1.10/themes/default/default.css"><script src="js/kindeditor-4.1.10/kindeditor-all-min.js"></script>..原创 2018-10-17 09:48:01 · 775 阅读 · 0 评论 -
【js】修改微信原始返回事件
//修改微信原始的返回事件$(function(){ pushHistory(); window.addEventListener("popstate", function(e) { alert("测试"); self.location.reload();}, false); function pushHistory() {...原创 2018-10-10 14:58:31 · 505 阅读 · 0 评论 -
【vue】解决数据渲染延迟出现的闪烁问题
首先在标签上加上v-cloak<div id="app" v-cloak> {{ message }}</div>然后加上样式，为防止被覆盖，可以加上!important[v-cloak] { display: none !important;} ...原创 2018-10-09 11:52:34 · 4697 阅读 · 0 评论 -
css3盒子模型内减模式和外加模式
内减模式border-box外加模式content-boxcontent-box 为 外加模式，用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大border-box： 为内减模式，盒子的实际宽度和高度是固定不变的，用户已经设置好的width和height。 增加border和padding的值，不会改变盒子的大小，只改变内容区域的大原创 2017-09-14 22:16:26 · 3799 阅读 · 0 评论 -
使用css3之text-shadow实现艺术字
在css3中text-shadow属性就是实现基础的文本阴影效果：span{ /* 文字阴影： text-shadow: 水平位移 垂直位移 模糊程度 阴影颜色; */ font: 700 100px "Comic Sans MS"; color: white; text-shadow: 0 0 20px #fdec8原创 2017-09-14 22:31:33 · 12116 阅读 · 0 评论 -
使用CSS3绘制简单的Android机器人
html CSS部分 body{ margin: 0; padding: 0; background-color: #f7f7f7; } .board{ wid原创 2017-10-07 11:35:51 · 1381 阅读 · 0 评论 -
【html5】css3过渡实现手风琴案例
过渡的属性介绍:/*过渡属性*//*transition:width 2s,background-color 2s;*//*多个属性过渡*//*transition: all 2s;*//*过渡属性*//*transition-property: all;*//*过渡持续时间*//*transition-duration: 2s;*//*运动曲线 ease ease-in原创 2017-10-20 09:07:50 · 1182 阅读 · 0 评论 -
【html5】transform属性
transform属性 body{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; background-color: pink;原创 2017-10-20 09:33:34 · 585 阅读 · 0 评论 -
【html5】css3渐变
css3的渐变有两种:一种是线性渐变:线性渐变： linear-gradient(方向，起始颜色，终止颜色); 方向：to left to right to top to bottom 角度 30deg 起始颜色 终止颜色另一种是径向渐变:径向渐变：radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）原创 2017-10-20 09:56:23 · 837 阅读 · 0 评论 -
JS中的4大对象
一.内置对象例如:Date,Math等二.自定义对象function Student(id,name,sal){ //this指向s引用 this.id = id; this.name = name; this.sal = sal;}三.浏览器对象例如:window对象,document对象，status对象，location对象,history对象等原创 2017-11-06 22:57:57 · 1264 阅读 · 0 评论 -
js实现ajax的步骤
开发步骤:第一步:创建ajax异步对象第二步:准备发送异步请求,例如:ajax.open(method,url);第三步:如果是POST请求，一定要设置请求头，即ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");第四步:真正发送请求体的数据到服务器,例如:ajax.se原创 2017-11-06 23:10:06 · 1589 阅读 · 0 评论 -
【js】使用xml数据载体实现城市省份二级联动
首先写好前台页面testProvince.jsp，将请求通过open、send发送到服务器<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>原创 2017-11-07 13:19:17 · 527 阅读 · 0 评论 -
【js小工具】去除所有空格
function trim(str){ //从左侧开始替换空格 str = str.replace(/^\s*/,""); //从左侧开始替换空格 str = str.replace(/\s$/,""); return str;}原创 2017-11-07 22:43:35 · 947 阅读 · 0 评论 -
【js小案例】使用ajax实现验证码功能
首先创建一个验证码<%@ page contentType="image/jpeg; charset=utf-8" language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" pageEncoding="UTF-8"%><%! //获取随机颜色 public Color原创 2017-11-07 23:12:47 · 2579 阅读 · 0 评论 -
【bootstrap】入门
bootstrap介绍:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。bootstrap包下的内容:基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。CSS：Bootstrap 自带原创 2017-12-13 09:48:14 · 365 阅读 · 0 评论 -
【FontAwesome】入门小案例
FontAwesome是一款可以和bootstrap框架进行搭配的图标集，提供大量漂亮的图标和字体接下来我们就来学习一下如何入门:1.进入官网下载文件：http://fontawesome.io/#modal-download2.将下载的文件解压拷贝到你的项目中:3.写好静态文件并引入fontawesome的样式4.到官方找寻需要的图标，在页面中进行相应的配置翻译 2017-12-15 16:01:10 · 395 阅读 · 0 评论 -
【canvas】入门
Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。在canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 canvas入门 canv原创 2017-12-15 17:30:52 · 287 阅读 · 0 评论 -
【canvas】非零环绕原则
大家都知道平时画比较规矩的线条时，都可以很明确地给其涂色，例如矩形，圆形等。那么不规矩的图片呢 ?当我们使用canvas进行填充颜色时，我们可以使用fill()方法进行填充，那么问题来了，那么它是怎么进行填充颜色的呢？没错，它遵循的原则就是:非零环绕原则。那么什么是非零环绕原则？如图是一用一根线条画出来的颜色，我们画出其路径，我们在其中随意挑选三个点分别向任原创 2017-12-15 21:51:06 · 572 阅读 · 0 评论 -
【canvas】使用canvas画出坐标和线
具体代码如下: 在指定位置画多个点 canvas{ border: 1px dashed gray; } var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d');原创 2017-12-17 16:46:51 · 4963 阅读 · 1 评论 -
【canvas】根据给定数据画折线图
首先我们需要写好画坐标的方法/** * Created by evan_qb on 2017/12/17. *///画坐标轴的两条线function drawCoordinate(ctx,vertexTop,vertexRight,origin,arrow,padding) { ctx.beginPath(); ctx.moveTo(vertexTop.x, verte原创 2017-12-17 17:26:30 · 3151 阅读 · 0 评论 -
【canvas】绘制饼状图
首先通过创建一个Pipe对象，定义画饼状图的方法(function( w ) { // 把角度转换为弧度 function angleToRadian( angle ) { return Math.PI / 180 * angle; } // 混入式继承 function extend( o1, o2 ) { for原创 2017-12-31 15:03:25 · 471 阅读 · 0 评论 -
【js】js中的原型
原型是什么？在构造函数创建出来的时候，系统会默认的创建并关联一个对象，这个对象就是原型，原型对象默认是空对象默认的原型对象中会有一个属性constructor指向该构造函数原型的作用原型对象中的成员，可以被使用和它关联的构造函数创建出来的所有对象共享原型对象的使用1. 使用对象的动态特性，为原型对象添加成员2. 直接替换原型对象 注转载 2018-01-14 22:46:02 · 240 阅读 · 0 评论 -
【js】初识原型链及继承
什么是原型链？每个构造函数都有原型对象,每个对象都会有构造函数每个构造函数的原型都是一个对象,那么这个原型对象也会有构造函数,那么这个原型对象的构造函数也会有原型对象,这样就会形成一个链式的结构，称为原型链。原型链的基本形式function Person(name){ this.name = name;}var p = new Person();p原创 2018-01-22 11:01:12 · 218 阅读 · 0 评论 -
【js】递归遍历所有后代元素
html代码如下: 递归的应用 div{ height: 50px; margin: 20px; }原创 2018-01-22 14:39:01 · 5363 阅读 · 0 评论 -
【js】函数的调用模式
函数模式:特征:就是一个简单的函数调用，函数名前面没有任何的引导内容 function foo(){} var func = function(){} foo(); func(); (function(){})();this在函数模式中的含义： this在函数中表示全局对象，在浏览器中是window对象方法模式:特征原创 2018-01-22 16:43:38 · 259 阅读 · 0 评论 -
【js】使用缓存优化递归求斐波拉契数列存在的问题
首先我们先使用传统方法写一个求斐波拉契数列的递归行数 function fib(n){ return n <=2 ? 1: fib(n - 1) + fib(n - 2); } var fib = fib(5); console.log(fib);这样，我们很快就能求出来，表面上看代码上没什么毛病，接下来，我们就来统计一下函数执行的原创 2018-01-22 20:34:50 · 1465 阅读 · 1 评论 -
【js】使用js实现遮罩层
首先我们定义好html结构，mask为遮罩层的结构 登陆 使用css样式，首先使mask遮罩层隐藏.mask{ width: 100%; height: 100%; position: fixed; top:0; left: 0; display: none; ba原创 2018-01-27 13:17:14 · 9985 阅读 · 2 评论 -
【js】jQuery实现五星评分
html代码: ☆ ☆ ☆ ☆ ☆ css样式*{ margin:0; padding:0;}.box{ margin: 20px auto; height: 50px;原创 2018-01-27 14:11:25 · 2332 阅读 · 0 评论 -
【js】在csdn中开启阅读模式
// ==UserScript==// @name 开启阅读模式// @namespace http://tampermonkey.net/// @version 0.1// @description try to take over the world!// @author evan_qb// @match http://b...原创 2018-03-05 16:27:32 · 1614 阅读 · 0 评论 -
【js】判断手机的正则表达式
var isMob = /^1[3|4|5|7|8][0-9]{9}$/;var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; if(!isPhone.test(contactTel)){ if(!isMob.test(contactTel)){ alert("请输入正确的手机号"); return false; } }...原创 2018-03-22 22:57:11 · 816 阅读 · 0 评论 -
【js】禁止浏览器回退
//禁止浏览器的回退$(function() { if (window.history && window.history.pushState) { $(window).on('popstate', function () { window.history.pushState('forward', null, '#'); window.history.forwa...原创 2018-03-23 09:06:48 · 354 阅读 · 0 评论 -
【html5】浏览器最高内核渲染声明
<meta charset="utf-8"><!-- 优先使用 IE 最新版本和 Chrome --><meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" /><!-- 360 使用Google Chrome Frame --><meta name原创 2018-03-23 10:15:57 · 590 阅读 · 0 评论 -
【js小工具】csdn博客去除水印
新版csdn更新后，我们每次插入图片时都会默认加上水印，虽说是为了保证版权问题，但同时也影响了观赏效果: 于是我上网查了一下，发现了博客水印的规律https://img-blog.youkuaiyun.com/20180404090529892?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V2YW5fUUI=/font/5a6L5L2...原创 2018-04-04 09:34:18 · 3028 阅读 · 0 评论 -
【微信小程序】开发第一个微信小程序
第一步:申请账号https://mp.weixin.qq.com/wxopen/waregister?action=step1 第二步: 进行基本设置登录 https://mp.weixin.qq.com ，在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 A...原创 2018-04-04 15:46:20 · 482 阅读 · 0 评论 -
【js】使用js将html导出为pdf格式
项目开发中遇到了一个变态需求，需要把一整个页面导出为pdf格式，而且要保留页面上的所有的表格、svg图片和样式。简而言之，就是希望像截图一样，把整个页面截下来，然后保存成pdf。咋不上天呢……查了一下，能够实现html转pdf的方法还是挺多的，大概有以下几种：1、大部分浏览器就有这个功能。然而我们客户要的可不是这个，人家要的是能够在系统中主动触发的导出为pdf功能，所以这种方案pass。2、利用第...转载 2018-04-17 15:38:15 · 2106 阅读 · 0 评论 -
【js案例】使用js制作写字画布
canvas实现画板功能canvas实现画板功能Setp1构建网页基本样式Step2构造实现画板各个功能的js代码Step3加载js文件需求分析 1.具有基本的铅笔功能 2.即时直线绘制 3.即时绘制矩形 4.即时圆形 5.即时橡皮擦 7.插入图片 8.把画板保存为图片并下载 //此处还没做好，画板底色是黑色的 9.选择颜色 10.选择线条粗细Setp1:构建网页基本样式html代码 <...转载 2018-04-17 20:58:22 · 1464 阅读 · 0 评论 -
【js小案例】使用js实现在线签名并导出pdf文件
在网上经历了一番搜索，发现了一些插件实现该功能。本次引用的插件有:jspdf.min.js html2canvas-0.4.1.js页面index.html<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- &l...原创 2018-04-19 09:54:53 · 5373 阅读 · 8 评论