前端 - 简忆博客

mysql增、删、改、查语句

2017-05-05 前端

mysql增、删、改、查语句例子：创建表：create;table;tutorials_tbl( ;;;id;INT;NOT;NULL;AUTO_INCREMENT, ;;;title;VARCHAR(100);NOT;NULL, ;;;author;VARCHAR(40);NOT;NULL, ;;;date;DATE, ;;;PRIMARY;KEY;(;id;));语句：添加：;insert;into;ba_user(`username`,`password`)VALUES('张三',MD5('123456')); 查询：select;*;from;ba_user; 修改：UPDATE;ba_user;SET;username='小里';WHERE;id=9; 删除：DELETE;FROM;ba_user;WHERE;id=9;

利用JavaScript实现图片上传预览

2017-05-08 前端

2921 0

html代码：<div;class="col-xs-12"> ;;<div;class="col-xs-12"> ;;;; ;;;;<form;action="";method="post";class="form-horizontal";role="form";enctype="multipart/form-data";method="post"> ;;;;;;;;<div;class="form-group"> ;;;;;;;;;;;;<label;class="col-sm-3;control-label;no-padding-right";for="form-field-1"></label> ;;;;

js生成随机数

2017-06-08 前端

3035 0

js随机数的几个用法var;chars;=;['0','1','2','3','4','5','6','7','8','9','A','B','C', 'D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; function;generateMixed(n);{ ;

js获取系统当前时间

2017-07-02 前端

2947 0

一、简洁版1.;<script> ;;;;var;oDate;=;new;Date();;//实例一个时间对象； ;;;;oDate.getFullYear();;;;//获取系统的年； ;;;;oDate.getMonth()+1;;;;//获取系统月份，由于月份是从0开始计算，所以要加1 ;;;;oDate.getDate();;//;获取系统日， ;;;;oDate.getHours();;//获取系统时， ;;;;oDate.getMinutes();;//分 ;;;;oDate.getSeconds();;//秒 </script>2.<p><script>document.write(oDate);</script></p>效果图：二、动态显示时间1、<script>; ;;;;function;showTime();{; ;;;;;

sublime_text删除行尾空格

2018-07-30 前端

3237 0

CTRL+H打开replace功能，勾选上左侧的regular expression，并填写;find what栏 : \s+$;replace with栏 : （这行留空）;接着点replace all即可

JS判断客户端是手机还是PC

2017-09-05 前端

3311 0

Javascript 判断客户端是否为 PC 还是手持设备，有时候项目中需要用到，很方便的检测，原生的，下面是js判断代码：<script> ;;;;var;sUserAgent;=;navigator.userAgent.toLowerCase(); ;;;;var;bIsIpad;=;sUserAgent.match(/ipad/i);==;"ipad"; ;;;;var;bIsIphoneOs;=;sUserAgent.match(/iphone;os/i);==;"iphone;os"; ;;;;var;bIsMidp;=;sUserAgent.match(/midp/i);==;"midp"; ;;;;var;bIsUc7;=;sUserAgent.match(/rv:1.2.3.4/i);==;"rv:1.2.3.4"; ;;;;var;bIsUc;=;sUserAgent.matc

js实现导航菜单高亮

2018-01-29 前端

2936 0

js实现导航菜单高亮<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <title>Document</title> </head> <style> *{;padding:;0px;;margin:;0px;;text-decoration:;none;;list-style:;none;} #navi{;width:;1200px;;height:;50px;;float:;left;} #navi;ul{;width:1200px;;height:;50px;;float:;left;} #navi;ul;li{;width:;600px;;height:;50px;;float:;left;;text-align:;center;;} #navi;ul;li;a{;font-size:;30px;;color:;#000;;line-height:;50px;} .hl{

本地存储封装接口store.js的使用教程

2018-10-25 前端

3213 0

store.js;是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。store.js的使用store.js的基本API有：store.set(key,;val);;//存储;key;的值为;val； store.get(key);;//获取;key;的值； store.remove(key);//移除;key;的记录； store.clear();;//清空存储； store.getAll();//返回所有存储； store.forEach();//遍历所有存储。使用store.js提供的方法，需要先引入store.js插件:附件：store.txt<script src="https://cdn.bootcss.com/st

js cookie的使用

2018-12-27 前端

2958 0

Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。以下是一个案例，当用户第一次打开网页是执行弹窗，打开其他页面不在出现弹窗，关闭浏览器，清除cookie，多用于网站弹窗提示。cookie弹窗使用案例//;cookie ;;;;function;get_cookie(Name);{ ;;;;;;;;;;var;search;=;Name;+;"=" ;;;;;;;;;;var;returnvalue;=;""; ;;;;;;;;;;if;(document.cookie.length;>;0);{ ;;;;;;;;;;;;offset;=;document.cookie.indexOf(search) ;;;;;

html当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

2017-12-20 前端

4418 0

当页面滚动到距顶部一定高度时某DIV自动隐藏和显示<script> $(function(){;; ;;var;height;=;$(".subMenu1").offset().top;;;//指定位置class ;;;$(window).scroll(function(){;; ;;;if($(window).scrollTop()>height){;; ;;;;$("#back").show();;;;;;;;;;;;;;; ;;;};; ;;;else{;; ;;;;$("#back").hide();;; ;;;};;; ;;});; ;; }) </script>

HTML5 video标签视频比例拉伸

2017-08-26 前端

4550 0

HTML5 video标签视频比例拉伸项目中有碰到视频比例拉伸的需求，可以通过以下方法来实现视频的拉伸。<style> video;{ ;;;;object-fit:fill; ;;;;width:800px; ;;;;height:320px;}</style><h1>测试视频比例拉伸：</h1> <style> ;<video;src="http://7xnzpx.com1.z0.glb.clouddn.com/miaoxingren_360p.mp4";controls;autoplay;loop> </video>

正则表达式（附：在线正则测试）

2017-07-16 前端

3155 0

表达式全集字符描述字符描述\将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。^匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。$匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。*匹配前面的子表达式零次或多次。例如，zo*能匹配“z”以及“zoo”。*等价于{0,}。+匹配前面的子表达式一次或多次。例如，“zo+”能匹配“zo”以及

CSS3：线性渐变+各种分布

2017-10-22 前端

2726 0

CSS3：线性渐变+各种分布<!DOCTYPE;html>;; <html>;; <head>;; <meta;charset="utf-8">;;; <title>网页title</title>;;; <style>;; #grad1;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(0deg,;red,;blue);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(0deg,;red,;blue);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(0deg,;red,;blue);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(0deg,;red

css实现360度无限旋转

2017-10-26 前端

4199 0

css实现360度无限旋转目标{animation:;2s;;rotate;linear;infinite} @keyframes;rotate;{ ;;;;0%{} ;;;;100%{transform:rotate(360deg);} }

css3实现鼠标悬停图片翻转

2017-11-01 前端

2790 0

css3实现鼠标悬停图片翻转.last_btn;img{-moz-transition:all;0.5s;linear;0s; ;;;;webkit-transition:all;0.5s;linear;0s; ;;;;transition:all;0.5s;linear;0s;;} .last_btn;a:hover;img{ ;-moz-transform:rotateY(360deg);perspective(200px); ;-ms-transform:rotateY(360deg);perspective(200px); ;-o-transform:rotateY(360deg);perspective(200px); ;-webkit-transform:rotateY(360deg);perspective(200px); ;transform:rotateY(360deg);perspective(200px); }

css3实现正六边形图片+悬停效果

2017-11-26 前端

3091 0

html代码<div;class="boxF;pic1"> ;;;;;;;;<div;class="boxS"> ;;;;;;;;;;;;;;;;<div;class="boxT";style="background-image:;url(1.jpg);"> ;;;;;;;;;;;;;;;;;;;;;<div;class="overlay"> ;;;;;;;;;;;;;;;;;;;;;;;;;;<a>正六边形</a> ;;;;;;;;;;;;;;;;;;;;;;</div> ;;;;;;;;;;;;;;;;;</div> ;;;;;;;;;</div> ;</div>css代码;;.lineF,;.lineS ;;;;;;;;{ ;;;;;;;;;;;;position:;absolute; ;;;;;;;;;;;;visibili

html常见样式代码、小结

2017-12-04 前端

3362 0

outline: none; ; ; ; ; ----文本框去掉鼠标点击边框颜色box-sizing:border-box; ;----给li列表加hover悬停效果会出现抖动问题可以加这句代码letter-spacing:5px ; ; ;----给文字加左右边距resize:none; ; ; ;----禁止textarea鼠标点击拉动大小

css3实现舞台灯管效果

2018-03-24 前端

3366 0

<!DOCTYPE;html> <html> <head> ;<meta;charset="UTF-8"> ;<title>Document</title> </head> <body> <div;class="head;pr">;;;; ;;;;<a;href="";target="_blank">;;;; ;;;;;;<img;src="images/banner_01.jpg";alt="">;;;;; ;;;;;;<i;class="hoverlight"></i> ;;;;;;<i;class="hoverlight1"></i>;;;;; ;;;;</a>;;;;;;; </div>;;;;

HTML动画，花飘动效果

2018-06-14 前端

3583 0

html代码<div;id="banner"> ;;;;;;;;<img;src="images/2018/fiveActive/banner_01.jpg";alt=""> ;;;;;;;;<a;href="javascript:void(0)";onclick="openS();return;false;";class="btn"> ;;;;;;;;;;;;<img;src="images/2018/fiveActive/btn1_03.png";alt=""> ;;;;;;;;</a> ;;;;;;;;<div;class="hua;hua1"><img;src="images/2018/fiveActive/hua1.png";alt=""></div>

利用360浏览器Console打印接口数据

2017-09-23 前端

3148 0

利用360浏览器Console打印接口数据，本案例以豆瓣API来演示打开地址豆瓣电影api接口：http://api.douban.com//v2/movie/in_theaters可以看到密密麻麻的数据：看着头疼可以同一下方法来打印数据：按下F12,点击Console,输入 var a=全选复制以上数据,回车接着输入a，回车，最终数据是不是清晰可见了。

css3实现鼠标悬停图片缓慢放大

2017-11-03 前端

3178 0

css3实现鼠标悬停图片缓慢放大.p2_content;li;img{;width:;365px;;height:379px;;;;cursor:;pointer;;transition:;all;0.6s;overflow:;hidden;} .p2_content;li;img:hover{;transform:;scale(1.05);}

mysql增、删、改、查语句

利用JavaScript实现图片上传预览

js生成随机数

js获取系统当前时间

sublime_text删除行尾空格

JS判断客户端是手机还是PC

js实现导航菜单高亮

本地存储封装接口store.js的使用教程

js cookie的使用

html当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

HTML5 video标签视频比例拉伸

正则表达式（附：在线正则测试）

CSS3：线性渐变+各种分布

css实现360度无限旋转

css3实现鼠标悬停图片翻转

css3实现正六边形图片+悬停效果

html常见样式代码、小结

css3实现舞台灯管效果

HTML动画，花飘动效果

利用360浏览器Console打印接口数据

css3实现鼠标悬停图片缓慢放大

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

mysql增、删、改、查语句

利用JavaScript实现图片上传预览

js生成随机数

js获取系统当前时间

sublime_text删除行尾空格

JS判断客户端是手机还是PC

js实现导航菜单高亮

本地存储封装接口store.js的使用教程

js cookie的使用

html当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

HTML5 video标签视频比例拉伸

正则表达式（附：在线正则测试）

CSS3：线性渐变+各种分布

css实现360度无限旋转

css3实现鼠标悬停图片翻转

css3实现正六边形图片+悬停效果

html常见样式代码、小结

css3实现舞台灯管效果

HTML动画，花飘动效果

利用360浏览器Console打印接口数据

css3实现鼠标悬停图片缓慢放大

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录