web前端开发识问答社区，提供包括html5、css3、JavaScript、vue.js、node.js、APP、小程序等内容分享。
html5新增的表单type新属性值
1. 限制用户输入必须为邮箱类型type="email" 注:必须含有@，@前后内容不能为空2. 限制用户输入必须为url地址type="url" 注:必须含有http: ,并且http: 后面要有内容3.限制用户输入必须为数字type="number" eg:<inputtype="number"max=...
html5新增表单新属性
1. required 为必填项，不能为空<inputtype="text"required="required"/> 注: 可以省略属性值 required2. placeholder 给input控件添加一个默认提示信息<inputtype="password"placeholder="请输入密码&quo...
3D倾斜图片列表布局特效
css代码.images-leaning{ box-sizing:border-box; width:100%; min-width:800px; margin:10emauto0; min-height:330px; position:relative; background-repeat:no-repeat; background-image:linear-gradient(3...
JavaScript eval定义动态变量名及赋值教程
/*简单代码，看懂eval动态变量定义的创建和使用*/ <html> <head> <scripttype="text/javascript"> eval("varinput_id1;"); input_id1=100; alert(input_id1); </script> &...
JavaScript调用UEditor相册模块
HTML：<img src="/images/btn_addfile.png" οnclick="upImage()" />上传按钮，打开UEditor相册模块<script type="text/plain" id="j_ueditorupload" style="height: 5px;...
jQuery金币兑换列表（单选自适应）
所用图片：.listview{width:100%;background:#000;font-size:14px;margin:0;padding:0;} .listview_item{float:left;width:48%;height:66px;border:1pxsolid#D8D8D8;background:#F6F6F6;list-style:none;margin-left:1%;...
微信小程序tab选项卡源码（二）使用于嵌入页面中间非全屏内容、高度自适应、选项卡内容各不相同的场景(
微信小程序tab选项卡，支持点击切换、左右滑动切换效果图tab-02.wxml<viewstyle="padding:50px;background:#dfdfdf;text-align:center;"> 头部内容 </view> <viewclass="tab-content"> <!--头部tab切...
微信小程序tab选项卡源码（一）使用于全屏内容、选项卡内容各不相同的场景(支持点击切换、左右滑动切换
微信小程序tab选项卡，支持点击切换、左右滑动切换效果图tab-01.wxml<viewclass="tab-content"> <!--头部tab切换部分start--> <viewclass="tab-menu"> <viewclass="{{currentTab==0?'tab-...
探索在网页中使用“标注”
说起标注，在HTML5之前，你可能想起的是各种浏览器插件，emmmmmmm或者说你根本不认为浏览器上可以有这种玩意。但是HTML5来了，这是它的时代。我们完全可以不借助CSS、JavaScript的力量实现这个东西 —— 因为浏览器实现了<ruby></ruby>这个神奇的标签：<r...
小数型Number在web中最出色的两个应用场景
我们大概都知道的是：精确度问题不仅在前端，甚至在整个编程领域都是由来已久的。前端的精确度问题大概要从Math.floor(number)向下取整、Math.round(number)四舍五入但是round函数在正数和负数表现竟然有差异为开端。这里不得不提一句：Math.round的实现...
探索js让你的网页“自己开口说话”
最近一直在研究音视频流，正好想要做一个有声提示，增强页面交互和用户体验的功能。（以后打算引入前端AI，让整个页面真正实现语音控制，嘿嘿）。这一想，顺便就想到了让一众网友为难的网页自动播放音视频。不说废话，实现过程中倒是遇到了一点小...
微信小程序自定义日历组件及flex布局最后一行对齐问题分析
最近为我开源的小项目：微信小程序扩展自定义组件库（点击去GitHub）增加了一个新组件 —— 日历组件。效果演示：在编写过程中，因为大家都知道，日历组件是有固定行数和每一行的固定列数的（即使当前方块内没有值），所以结合小程序数据优先的特点，最合...
从表单校验看JavaScript策略模式的使用
众所周知的是，表单确实在前端，唔，或者说在网页中占有不小的比重。事实上，几乎每一个中大型网站都会有登录注册以验证用户信息、防止一些不可名状的隐患。。。那么表单的优劣就成了前端开发者急需解决的问题。其实我更愿意称为代码的可读性或可复...
vue项目实录：下拉刷新组件的开发及slot的使用
下拉刷新和上滑加载更多功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的blink功能和各位探讨下【下拉刷新】组件的开发：正式开篇在前端项目的 components 文件夹下新建 pullRefreshView 文件夹，在其中新建组件 index....
【JavaScript设计模式】单例模式
写在前面这个系列的文章是通过对《JavaScript设计模式》一书的学习后总结而来，刚开始觉得学习的时候只需看书即可，不用再另外记录笔记了，但是后面发现书中有些内容理解起来并不是很容易，所以结合书中的描述就将自己的理解也梳理了一下并将它记录下来，希望...
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','http://www.shouhuola.com/data/category/000/00/00/big_000000015.jpg', '《Web前端》','http://www.shouhuola.com/cat-15','页面编码gb2312|utf-8默认gb2312'));){kind=link}