html，css学习笔记
关注
分享
扫一扫
idjl
PHP程序员
展开
-
小程序可用emoji加密md5.js
小程序的昵称有emoji表情, 之前网上找的md5库加密后和php加密的md5不一样用下面的代码可以解决此问题//https://github.com/blueimp/JavaScript-MD5(function($) { 'use strict' /** * Add integers, wrapping at 2^32. * This uses 16-bit...原创 2020-04-04 22:50:58 · 13276 阅读 · 0 评论 -
JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不...转载 2018-09-10 10:07:18 · 39450 阅读 · 1 评论 -
解决csdn博客复制带小尾巴问题
现在csdn博客上面复制内容都会带个小尾巴，如：一般来说，Shell的初始化脚本分为2种 --------------------- 本文来自 idjl 的优快云 博客 ，全文地址请点击：https://blog.youkuaiyun.com/u010071211/article/details/82817915?utm_source=copy 带小尾巴并没有错，知乎，简书早就有了，可是复制出来...原创 2018-09-23 12:20:31 · 29100 阅读 · 10 评论 -
图片延迟加载插件lazyload使用
效果演示：http://code.ciaoca.com/jquery/lazyload/demo/lazyload简介：懒加载，当滚动到图片位置时再开始进行加载官方网站：https://appelsiini.net/projects/lazyload/最新版本为2.0版本，详见：https://github.com/tuupola/jquery_lazyload/tree/2.x这...转载 2018-09-20 14:05:03 · 9544 阅读 · 0 评论 -
jquery的ajax上传图片并且显示上传进度
jquery上传文件用的formdata，上传进度条需要添加xhr的onprogresshtml代码如下：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible&qu原创 2018-10-11 18:13:24 · 21040 阅读 · 2 评论 -
点击图片上传实时预览
html源代码如下：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <title>图片上传</title></head><style>原创 2018-10-11 18:17:45 · 8070 阅读 · 0 评论 -
短网址，网址缩短源代码
不用数据库的短网址一直没找到一个好用的网址缩短工具，所以自己写了一个前端为bootstrap自适应，后端利用php的数组保存短网址，array_search判断是否重复长网址key是短网址的id，value是长网址 使用说明需要urls.php文件修改为777权限修改index.php中的$siteTitle和$siteUrl即可，可以一级域名或放二级文件夹使用$...原创 2018-09-29 16:12:45 · 11426 阅读 · 0 评论 -
复制网页内容自动添加版权信息的方法
现在很多网站都有复制网页内容自动添加版权信息，俗称小尾巴，比如：知乎，简书，优快云等经过查找和测试发现此代码真实有效，利用的是javascript的oncopy事件本人对大神代码进行了改良，现记录如下：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"&g...转载 2018-09-29 17:15:21 · 24968 阅读 · 6 评论 -
css3中before和after伪类的使用
对网页元素批量的加预定义效果content中放的是16进制unicode编码比如「我」的unicode是6211（16进制）,content:"我" 和 content:"\6211" 的含义是一样的<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&q原创 2018-09-29 18:04:01 · 10312 阅读 · 0 评论 -
css滑动门效果，文字两侧背景花纹自适应
css滑动门效果：不同长度的文字，两侧的背景图案一致，如下图所示。效果预览：素材图片：t2.jpg源代码如下：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com原创 2018-10-10 10:51:24 · 8503 阅读 · 0 评论 -
去掉bootstrap4自带的input输入框半透明阴影
bootstrap 输入框等输入时会自带蓝色阴影效果，有时候我们并不需要。button同理查看bootstrap.css代码，搜索focus，找到相关内容。所以我们再写css，把它原来的覆盖掉就可以啦 /*去掉bootstrap自带的input输入框半透明阴影*/ .form-control:focus { box-shadow: none...原创 2018-10-31 14:54:01 · 14146 阅读 · 0 评论 -
美化input文件上传按钮
效果演示： <!-- /** * @Author: Ding Jianlong * @Date: 2018-09-21 13:25:05 * @Last Modified by: Ding Jianlong * @Last Modified time: 2018-10-24 15:47:13 */ --><!DOCTYPE html><...原创 2018-10-24 15:50:13 · 8809 阅读 · 0 评论 -
Chrome等浏览器下出现net ERR_BLOCKED_BY_CLIENT的解决办法
当我们在做开发时，调试页面图片会出现部分图片无法正常显示，并且确认图片的地址正确；按F12 Debug查看报错原因，提示net::ERR_BLOCKED_BY_CLIENT错误，但当我们点击图片地址发现，图片地址并无错误；遇到这类情况，一般都是浏览器安装的某个第三方扩展程序已阻止对此网页的访问，例如下图： 解决办法：当我们查看浏览器第三方插件的时候，就会看到插件中存在“广告...转载 2018-10-27 15:59:06 · 11791 阅读 · 0 评论 -
console的高级用法，console.log带颜色的字
先展示效果图：<!-- /** * @Author: Ding Jianlong * @Date: 2018-11-08 14:37:05 * @Last Modified by: Ding Jianlong * @Last Modified time: 2018-11-08 17:14:05 */ --><!DOCTYPE html>&...原创 2018-11-08 17:22:25 · 45321 阅读 · 2 评论 -
jQuery Validate验证使用记录
官网：https://jqueryvalidation.org特别说明：前端验证只适用于一般用户，后端必须再次验证0、演示1、导入js<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" s...原创 2018-12-27 18:34:53 · 5912 阅读 · 0 评论 -
input表单开始时间和结束时间的选取，laydate
需求描述：开始时间要大于当前时间，结束时间要大于开始时间。网上相关插件有很多。在此我选用了laydate，官网：https://www.layui.com/laydate/官网的文档，并不能完全满足需求；通过google查资料和自己的摸索，实现功能，现记录如下：<!DOCTYPE html><html><head> <meta c...原创 2018-09-12 12:51:49 · 16549 阅读 · 1 评论 -
带有图片预览功能的上传表单
input上传文件 一次多个：multiple=“multiple”使用 accept 属性设置接收的类型，如：<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /><html><head><meta charset=&qu转载 2018-09-11 16:37:21 · 9557 阅读 · 0 评论 -
ajax批量删除功能的实现源代码
效果展示：完整代码如下：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2018-08-21 14:41:06 · 11461 阅读 · 0 评论 -
Javascript window.close()不起作用？
一般的窗口关闭的JS如下写法： window.close() 但是呢，chrome，firefox等中有时候会不起作用。改为下面的写法： window.open("about:blank","_self").close() 或者 window.open("","_self").close() 如果是frame的时候如下写法： ...转载 2017-05-01 10:02:41 · 10725 阅读 · 1 评论 -
jQuery学习总结1
一、下载集CDN引入1.1、官方下载地址：http://jQuery.com/download/jq自2.0版本开始，不再支持IE9一下浏览器；自3.0版本开始，针对移动端做了优化处理；引入 1.2、CDN加速如果将我们的代码放在各大城市，根据用户所在地去距离用户最近的地方下载，那么我们网站的打开速度将会大大提升，这就是所谓的CDN加速的基本原创 2017-11-20 19:34:32 · 10131 阅读 · 0 评论 -
省市区地址三级联动jQuery插件Distpicker使用
插件下载地址http://www.jq22.com/jquery-info8054效果如下:使用:1.引入js2.根据demo示例,写div 3.用户选择值value的获取$("#tijiao").click(function(){var province = $("#eprovin原创 2017-12-08 21:06:11 · 54316 阅读 · 4 评论 -
JS截取字符串常用方法详细整理
使用 substring()或者slice() 函数：split() 功能：使用一个指定的分隔符把一个字符串分割存储到数组 例子： str=”jpg|bmp|gif|ico|png”; arr=theString.split(”|”); //arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组 函数：Join() 功能：使用转载 2017-12-20 19:59:19 · 15122 阅读 · 0 评论 -
JQUERY获取当前页面的URL信息
以前在做网站的时候，经常会遇到当前页的分类高亮显示，以便让用户了解当前处于哪个页面。之前一直是在每个不同页面写方法。工程量大，也不便于修改。一直在想有什么简便的方法实现。后来在网上查到可以用获取当前URL的详细信息来判断。所以收集了JQUERY获取URL的函数的资料。设置或获取对象指定的文件名或路径。window.location.pathname例：http://localhos转载 2017-12-20 20:16:18 · 12221 阅读 · 0 评论 -
jQuery学习总结2
六、动画效果6.1、基本hide([speed,[fn]])隐藏显示的元素speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000);fn:在动画完成时执行的函数。 show([speed,[fn]])显示隐藏的匹配元素speed: 三种预定速度之一的字符串("slow","normal", o原创 2017-11-23 13:11:35 · 9819 阅读 · 0 评论 -
手机html根据手机分辨率网页文字大小自适应
问题：不同手机型号屏幕尺寸大不相同，导致同样的文字，有的显示一行，有的显示多行。通过查资料和自己的尝试解决；网页开发习惯的px单位，手机html开发不适用。源代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--防止手机页面缩放-->转载 2018-05-27 23:33:44 · 22085 阅读 · 1 评论 -
使用device.js检测设备并实现不同设备展示不同网页
现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果，但是有些时候想在直接在PC上展示一个做好的页面，在mobile展示另一个页面。这个时候可以借助device.js来检测设备，然后打开不同的页面（device.js 是一个可以用来检测设备，操作系统和方向的js库）。当然这种做法需要一次跳转。 假设有个m.html想用于mobile端展示，pc.html想用于pc端展示。这个时候...转载 2018-07-03 14:44:52 · 12328 阅读 · 0 评论 -
当你的静态资源CDN挂掉了该怎么办？
都知道使用静态的CDN引入jQuery等一些js包的时候，会提升网页的性能，那么，如果你引入CDN的地址挂掉了，那么项目同样也会挂掉，所以我们需要在引入的时候添加一个判断。如下：<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script>...转载 2018-07-03 15:23:43 · 13891 阅读 · 0 评论 -
大文件上传进度条实现
大文件上传进度条实现1.FormData对象提交表单 进行表单提交时，如果表单当中的域很多，使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数据，包括文件域的数据，操作更方便。2.调整允许上传文件大小 修改php.ini文件中允许POST表单上传的最大数据量： 修改php.ini文件中允许上传文件的最大大小：3.onprogress事件 onprogress事件是 XM...转载 2018-07-13 17:54:30 · 18309 阅读 · 1 评论 -
浏览器在线查看pdf文件 pdf.js的使用教程
谷歌浏览器可以直接在线查看pdf，而IE内核浏览器无法在线查看，默认是下载。这里用到的是pdf.js，不仅支持IE内核浏览器，而且兼容手机查看pdf官网地址：http://mozilla.github.io/pdf.js/版本：2.0.* 下载之后解压放到本地服务器，打开对应网址查看一下。/web/viewer.htmlIE也是可以正常显示的默认的pdf文件设置，搜...原创 2018-07-31 15:48:21 · 44975 阅读 · 6 评论 -
HTML5开启浏览器桌面通知 Web Notification
说明：1、Chrome要求必须https才可以开启浏览器通知2、显示图片在本服务器，不支持跨越3、自定义声音Chrome不播放，Firefox正常播放代码如下：<!-- /** * @Author: Ding Jianlong * @Date: 2018-08-02 10:20:58 * @Last Modified by: Ding Jianlong *...转载 2018-08-02 14:05:13 · 18823 阅读 · 1 评论 -
网页中多个图标在一张图片上，使用css将各图标显示
test.png完整的代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> .tree-default{ width:100px; hei...原创 2018-08-16 11:24:31 · 13975 阅读 · 0 评论 -
为什么全部width 100%浏览器边缘存在留白？
一般浏览器都给body加了外边距，margin:0应该能解决你所遇到的问题。但你很可能又会遇到其他奇怪的现象，比如说p的行高，在不同浏览器上显示不一致，最根本的解决方案还是重置浏览器默认样式。可以使用目前兼容性较好的 necolas/normalize.css · GitHub作者：子丶言链接：https://www.zhihu.com/question/36208082/answer...转载 2017-04-28 16:49:34 · 13196 阅读 · 0 评论