前端
萧逸才
这个作者很懒,什么都没留下…
展开
-
JS实现简单的图片查看效果
用js实现了一个简单的图片查看效果。主要功能: 1、点击图片后打开遮罩并在遮罩中显示图片,大小已做好限制,不会因为图片太大而导致出现滚动条; 2、鼠标放上图片后可以滚动放大或缩小图片; 注意:需要jquery.js和jquery.mousewheel.js的支持。js(pic-view.js)代码如下:$(function () { $("body").delegate(原创 2017-03-29 22:34:27 · 7194 阅读 · 0 评论 -
js中0和'0'的区别
写这篇博客的原因是我在写js代码校验输入框input的值的时候遇到的一点疑惑,校验代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body><input type="text" id="input"/><button onclick="check();">校验</button></body><sc原创 2017-05-28 12:38:48 · 1956 阅读 · 0 评论 -
关于js中''、0、false、[]和{}等==的判断逻辑
这个问题也是我在写代码的途中遇到的,觉得有点意思,先附上我当时写的代码,如下:<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body></body><script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="原创 2017-05-28 13:06:35 · 6299 阅读 · 1 评论 -
使用thymeleaf时遇到的一些问题
最近一直在使用spring boot,所以自然而然的使用了thymeleaf,但是我想说习惯了jsp之后使用thymeleaf真实觉得不顺手,在使用thymeleaf中也遇到了一些问题,在这里记录一下,应该还是挺有用的,呵呵……问题一:org.xml.sax.SAXParseException: 元素类型 “input” 必须由匹配的结束标记 “” 终止。 这是最简单的一个问题,用过的,都知道,原创 2017-05-29 12:57:14 · 22817 阅读 · 3 评论 -
关于JavaScript的空字符问题
前几天同事给我看了一个他遇到的问题,如下图:IE浏览器 谷歌浏览器 火狐浏览器 如上图所示,在IE和谷歌浏览器里字符串显示的是”abc”(虽然在火狐浏览器显示是6个字符,但是后面3个却是乱码),但是长度却是6。当时我就懵逼了,从来没有遇到过这种情况,由于这个字符串是第三方接口提供的,所以我们不知道里面到底放了什么,后来查看文档(https://developer.mozilla.org/zh-C原创 2017-05-20 15:59:37 · 947 阅读 · 0 评论 -
js中的自增和自减
我们难免会遇到要在js中拼串的同时对某变量进行自增或自减并作为参数拼接去的操作,所以在这里简单的讨论一下在这种场景下的变量自增和自减。完整测试代码<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body></body><script type="text/javascript"原创 2017-06-01 18:11:06 · 22424 阅读 · 2 评论 -
setinterval是同步还是异步的问题
虽然经常使用setInterval定时器方法,但没有注意过它是否是异步或同步的问题,因为以前写的关于setInterval的代码,基本模式是这样的:setInterval(function(){//do something...},1000);,所以在这种情况下是观察不到异步和同步的问题的,直到有一次我写了这样的代码:setInterval(function(){//do something...}原创 2017-06-02 14:31:20 · 16804 阅读 · 3 评论 -
checkbox全选
遇到要写checkbox全选的时候,每次都要到网上搜一遍,这次记录下来,一劳永逸,省得以后老是忘记!代码<!DOCTYPE html><html><head> <meta charset="utf-8"></head><style> * { margin: 0px; padding: 0px; } body {原创 2017-06-02 14:43:16 · 472 阅读 · 0 评论 -
非常好用的jquery选择器笔记整理
jQuery是我们在开发前端时最常用到的一个JavaScript框架了,使用jQuery除了最基本的语法外,我觉得最重要的就是选择器了,有时使用一个正确的选择器,可以节省你大量的时间和代码,在这里整理了一些我在写代码的过程中遇到和使用的jQuery选择器和大家分享。$("#id")选择器根据ID来选择元素,是最常用的选择器之一。$(".class")选择器根据class来选择元素,是最常用的选择器原创 2017-06-10 11:04:20 · 559 阅读 · 0 评论 -
如何使用Framework7的图标icons
步骤一 访问:https://github.com/nolimits4web/Framework7-Icons,并下载css和fonts文件夹步骤二 将css和fonts文件夹的内容拷贝到本地Framework7文件夹下步骤三 在使用的地方引用css文件<link rel="stylesheet" href=".../framework7/css/framework7-icons.css">原创 2017-07-08 13:45:37 · 8264 阅读 · 0 评论 -
Framework7跳转页面如何自动隐藏工具栏(no-tabbar)
首先在Framework7文档(http://docs.framework7.cn/Index/tabbar.html)中我们知道: Framework7 允许你在ajax加载的页面自动隐藏工具栏/导航栏。只有在穿透布局的时候才可以使用。 你唯一需要做的就是在需要加载的页面上加一个类 “no-tabbar”(<div class="page no-tabbar">):<!-- Page原创 2017-07-08 14:13:51 · 2760 阅读 · 0 评论 -
html页面定位到指定位置的4种实现方式
<!DOCTYPE html><html><head> <meta charset="utf-8"></head><style> body { text-align: center; } #go_to { position: fixed; right: 10px; bottom: 10px;原创 2017-06-02 14:50:42 · 98023 阅读 · 3 评论 -
href="javascript:void(0);"、href="javascript:;"和href="#"
href=”javascript:void(0);” href=”javascript:void(0);”、href=”javascript:void 0;”和href=”javascript:void(1);”表示一个死链接,void是javascript的操作符,意思是:只执行表达式,但没有返回值,void操作符用法格式如下: javascript:void(expression)或java原创 2017-05-07 12:15:19 · 792 阅读 · 0 评论 -
css float的代码顺序和html页面显示顺序的问题
这其实不什么大problem,但是不注意的话也是不小的麻烦,so……代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> .div-right{ margin:0px; padding: 0px; height: 100px; wi原创 2017-05-14 16:38:16 · 2533 阅读 · 1 评论 -
css3之pointer-events
在日常写代码的过程中我们可能遇到类似这样的一种需求,就是要求点击某个按钮后禁用整个页面,即整个页面的点击事件失效,或者要求局部点击事件失效,这时我们就可以使用css3的pointer-events属性了。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> ul{ float: le原创 2017-04-30 16:36:59 · 580 阅读 · 0 评论 -
css3之未读消息小红点
<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .red-point{ position: relative; } .red-p原创 2017-04-09 09:13:15 · 15181 阅读 · 2 评论 -
鼠标放上图片,图片上方出现遮罩和文字效果
<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; }原创 2017-04-08 15:01:32 · 7246 阅读 · 0 评论 -
跑马灯(字幕水平滚动)的两种实现方式
js实现<!DOCTYPE html><html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin: 0px; padding: 0px; }原创 2017-04-09 13:15:21 · 4287 阅读 · 0 评论 -
(移动端)图片上传效果
<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; }原创 2017-04-10 22:52:18 · 3263 阅读 · 1 评论 -
前端列表筛选效果
<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; }原创 2017-04-03 17:41:55 · 3328 阅读 · 0 评论 -
jQuery 自定义选择器及应用
<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; }原创 2017-04-03 17:56:50 · 762 阅读 · 0 评论 -
CSS3鼠标放上按钮悬浮框提示效果
<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; }原创 2017-04-04 20:53:26 · 17061 阅读 · 1 评论 -
change、keypress、input和propertychange
<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> change:<input type="text" id="change"><br> keypress:<input type="text" id="keypress"><br> propertychange:<input原创 2017-04-13 20:33:09 · 5233 阅读 · 0 评论 -
监听html窗口焦点事件
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>使用html5的Page Visibility API来实现</title></head><body><div> document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖原创 2017-04-13 21:31:26 · 6420 阅读 · 0 评论 -
js的True、False判断
在js中的条件判断常常让人疑惑,因为js是一种弱类型语言,下面来进行测试,测试常见的变量类型在if条件中的表现<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> </body> <script type="text/javascript" src="jquery-3.0.0.min.js"原创 2017-04-30 10:11:34 · 14816 阅读 · 0 评论 -
js中的引号嵌套问题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> <h3>单引号</h3> <div id="single_quotes"></div> <hr/> <h3>双引号</h3> <div id="double_quotes"></div> <h3>打原创 2017-04-30 13:03:02 · 3459 阅读 · 0 评论 -
【强制】表单、 AJAX 提交必须执行 CSRF 安全过滤。
CSRF(Cross - site request forgery) 跨站请求伪造是一类常见编程漏洞。对于存在CSRF 漏洞的应用/网站,攻击者可以事先构造好 URL ,只要受害者用户一访问,后台便在用户 不知情情况下对数据库中用户参数进行相应修改。 具体思路:1、跳转页面前生成随机token,并存放在session中2、form中将token放在隐藏域中,保存时将...原创 2018-09-07 15:13:03 · 1010 阅读 · 0 评论