网站前端
弗兰克的天空
左手设计;右手代码。
frankfang7.github.io
展开
-
根据移动设备的分辨率,设置rem根fontSize大小
···原创 2020-08-04 11:16:19 · 302 阅读 · 0 评论 -
element-ui自带的滚动条
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...原创 2020-03-31 12:02:54 · 1021 阅读 · 0 评论 -
element-UI验证码倒计时
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...原创 2020-03-20 12:18:25 · 2653 阅读 · 0 评论 -
Vue中的一些修饰符
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2020-01-14 16:46:58 · 636 阅读 · 0 评论 -
js数组两层遍历
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2020-01-10 15:43:55 · 4452 阅读 · 1 评论 -
element-ui默认选中并高亮某一个树节点
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-12-25 16:12:00 · 2528 阅读 · 0 评论 -
ElementUI的el-date-picker日期设置以前或以后不可选
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-12-03 15:52:44 · 1395 阅读 · 0 评论 -
深拷贝方法
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-10-12 18:26:18 · 361 阅读 · 0 评论 -
localStorage存储和获取
<!doctype html><html><head> <meta charset="utf-8"> <title>localStorage</title> <!-- 引入样式 --> <link rel="stylesheet" href=&q原创 2018-11-27 09:52:20 · 1783 阅读 · 0 评论 -
element ui实现起始时间不能大于结束时间
<template> <div class="app-container"> <el-date-picker v-model="filters.column.create_start_date" type="date" :picker-options="pickerBeginDateBefore" format="yyyy-MM-转载 2018-10-26 09:48:59 · 1261 阅读 · 0 评论 -
Vue实现简单的无缝滚动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">转载 2018-10-25 14:32:04 · 4474 阅读 · 2 评论 -
vue-cli脚手架安装
1.首先下载安装node.js下载地址:https://nodejs.org/en/2.运行cmd,查看版本号(出现版本号说明安装成功)输入:node -v 查看node版本号(需要在6.9以上)输入:npm -v 查看npm版本号(需要在3.10以上)3.命令行工具(在cmd里安装)# 全局安装 vue-cli$ npm install --global vue-cli(Ma...原创 2018-08-13 16:37:32 · 133 阅读 · 0 评论 -
git 常用命令
#初始化git init#查看账号git config user.name //查看用户名git config user.email //查看邮箱#配置账号git config user.name 'frank' //局部配置用户名git config user.email 'frank@website.com' //局部配置邮箱git config --global...原创 2018-08-13 16:37:56 · 123 阅读 · 0 评论 -
vue实现键盘输入动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <di原创 2018-08-10 17:45:23 · 2505 阅读 · 2 评论 -
grid-template-areas和grid-area
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><title>grid</title><style>/* grid-template-areas */.container1 { dis原创 2018-03-21 15:29:45 · 2002 阅读 · 2 评论 -
Vue全局组件及传值
<!doctype html><html><head><meta charset="utf-8"><title>全局组件及传值</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"&原创 2018-03-21 10:45:40 · 2747 阅读 · 0 评论 -
ES6语法find查找匹配数组
<!doctype html><html><head><meta charset="UTF-8"><title>find查找数组数据</title></head><body><script>let myId = 3; l原创 2018-03-22 14:56:06 · 11344 阅读 · 0 评论 -
vue过滤
<!doctype html><html><head><meta charset="utf-8"><title>过滤</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js">&原创 2018-03-16 18:03:24 · 263 阅读 · 0 评论 -
用Vue实现好友分组效果
tab标签body { background-color: #999;}#box { max-width: 360px; min-height: 640px; background-image: linear-gradient(to right bottom, #432b8b, #89049e); background-size: cover; margin: 10px aut原创 2018-01-30 16:44:02 · 3674 阅读 · 1 评论 -
用Vue实现的tab标签
tab标签a { color: #555;}.tab { margin: 0; padding: 0;}.tab li { display: inline-block; padding: 5px 12px; color: #666; background-color: #eee; border: 1px solid #ddd; border-radius: 3px 3原创 2018-01-30 11:26:33 · 1318 阅读 · 0 评论 -
16进制ic卡号转换(将12345678转换成78563412)
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-01-14 20:06:13 · 8246 阅读 · 1 评论 -
一个better-scroll的基本demo
<template> <div id="app"> <ul class="menu"> <li @click="scrollTo(0, 0)">item 1</li> <li @click="scrollToEl('c-2')"&g原创 2019-02-13 10:18:52 · 2455 阅读 · 0 评论 -
一个vue-scrollto的基本demo
<template> <div id="app"> <ul class="menu"> <li v-scroll-to="'#a'">item 1</li> <li v-scroll-to="'#b'">item 2&原创 2019-02-14 10:45:25 · 5674 阅读 · 0 评论 -
巧用element-ui的inputNumber计数器的最小值和最大值属性
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-10-11 15:06:06 · 9676 阅读 · 1 评论 -
对两个数组中的对象进行比对
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-09-11 15:06:36 · 3003 阅读 · 0 评论 -
element-ui表单验证例子:validateField验证部分表单
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-08-05 14:47:35 · 32709 阅读 · 0 评论 -
elementUI的表单里套表格加验证的demo
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-07-26 11:33:55 · 1180 阅读 · 0 评论 -
es6的深拷贝和浅拷贝
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-07-25 11:13:37 · 303 阅读 · 0 评论 -
用toggleRowSelection方法对el-table表格列进行选中的例子
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-07-19 11:21:10 · 2959 阅读 · 0 评论 -
根据一个数组过滤另一个数组
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-07-05 17:27:47 · 5246 阅读 · 0 评论 -
最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下。给自己留个底,也给朋友们做个参考。一、校验数字的表达式1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$5 零和非零开头的数字...转载 2019-05-21 16:39:35 · 197 阅读 · 0 评论 -
另一个vue-scroll-to的例子
<template> <div class="m-3"> <ul class="menu"> <li v-for="(item, index) in videoList" :key="index" v-scroll-to="{ element: '#v' + index, offse...原创 2019-06-11 12:50:11 · 1269 阅读 · 0 评论 -
elementUI表单验证的问题
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...原创 2019-04-12 11:59:39 · 134 阅读 · 0 评论 -
chrome调用摄像头并拍照
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...转载 2019-03-28 09:16:16 · 2171 阅读 · 0 评论 -
清除表单验证的问题:需要加nextTick方法
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...原创 2019-04-23 19:48:38 · 1089 阅读 · 1 评论 -
定时器
计时器#clock { width: 200px; height: 50px; margin-bottom: 20px; color: #0ff; font-size: 20px; line-height: 50px; text-align: center; background-color: #333; border-radius: 25px;}.stop { col原创 2018-01-10 13:42:33 · 156 阅读 · 0 评论 -
css 禁止换行
挺好!原文地址:禁止换行">css 禁止换行作者:鲍鲍css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示代码部分: 一般的文字截断(适用于内联与块):==============CSS================.text-overflow{display:block;width:31em;word-break:keep-all;whit转载 2017-04-07 10:23:30 · 1667 阅读 · 0 评论 -
input点击链接另一个页面,各种操…
1.链接到某页<input type="button" name="Submit" value="确 定"class="btn" onclick="location.href='filename.html'"/>2.返回(等同后退)<input name="Submit2" type="button" class="btn"onclick="location.href='javasc原创 2017-04-07 10:23:33 · 1601 阅读 · 0 评论 -
CSS选择器详解
选择器是CSS的核心,从最初的元素、class/id选择器,演进到伪元素、伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单。1、元素选择器这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器:p {line-height:1.5em; margin-bottom:1em;}2、关系选择器E F:后代选择器,该选择器定位元素E的后代中原创 2017-04-07 10:23:39 · 196 阅读 · 0 评论 -
学习jQuery必须知道的几种常用方法
jQuery事件处理ready(fn)代码:$(document).ready(function(){ // Your code here...}); 作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。bind(ty原创 2017-04-07 10:23:41 · 289 阅读 · 0 评论