Web前端
文章平均质量分 59
刘鹏博.
赢在别人休息时
展开
-
win10安装node.js和npm
官网下载免安装的压缩包http://nodejs.cn/download/原创 2021-06-03 20:02:28 · 557 阅读 · 0 评论 -
jQuery实现复选框的全选和全不选
jQuery实现复选框的全选和全不选效果如图:代码如下: jQuery实现复选框的全选和全不选 全选 复选框1 复选框2 复选框3 复选框4 复选框5 $('input[name="checkall"]').on("click",function(){ if($(this).is(原创 2018-02-03 18:19:03 · 20714 阅读 · 5 评论 -
JS常用鼠标事件
JS常用鼠标事件 适合初学者的JS常用鼠标事件,包括 1、鼠标单击事件;2、鼠标双击事件;3、鼠标悬浮事件;4、鼠标移动事件;5、鼠标按下事件;6、鼠标抬起事件。效果如图:代码如下: JS常用鼠标事件 li{font-size: 18px;line-height: 35px;} l原创 2018-02-04 17:28:17 · 2816 阅读 · 0 评论 -
CSS实现文本溢出时显示省略号...
我们写前端页面或者浏览一些网站时,经常看到有文字介绍,后面会有...省略号,这是如何实现的呢?效果如下图:这属于单行文本溢出省略号显示型,具体实现代码:overflow: hidden;text-overflow: ellipsis;white-space: nowrap;注意,需要设置放置字体容器的 width 属性。...原创 2018-04-14 18:51:25 · 312 阅读 · 0 评论 -
jQuery实现返回顶部
jQuery实现返回顶部(gotop) 最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不是很好。因为没有视觉缓冲。所以,下面用 jQuery 写一个简单常用的返回顶部效果。效果如图:实现代码:html关键代码:<a class="gotop" href="javascript:;"&...原创 2018-04-15 16:21:47 · 3641 阅读 · 0 评论 -
H5多媒体视频播放器的使用及常用属性
H5视频播放器标签 video 实现代码如下:<video src="http://www.w3school.com.cn/i/movie.ogg" width="400" height="400" controls></video>1、其控制器默认样式如下图:(谷歌浏览器为例)其中的 controls 为显示默认的控制器2、视频源兼容性处理,浏览器兼容性参考图如下:其中...原创 2018-05-03 14:04:53 · 4211 阅读 · 0 评论 -
京东官网轮播图
今天以京东官网中的轮播图效果为例:写了一个 jQuery 轮播,效果图如下:原创 2018-05-17 23:41:10 · 841 阅读 · 1 评论 -
after伪类清除浮动
当我们用 float 的时候,会造成父级元素的塌陷,进而影响到我们的整体布局,因此,我们有时候需要清除浮动所带来的问题。有很多种清除浮动的方法,最简单粗暴的方法就是直接给塌陷的父级加高度,但是,这种方法对于需要从后台动态遍历数据的时候,这种“死”高度就会造成页面的乱版。所以,不建议使用。 最常用的方法之一就是利用伪类来清除浮动塌陷问题,只需要给塌陷的父类元素加上清除浮动的...原创 2018-05-22 16:10:53 · 3713 阅读 · 0 评论 -
js中for循环的使用——九九乘法表和倒三角
for循环的嵌套使用,经典案例,九九乘法表和倒三角。效果如图:完整JS代码如下:<script> /*九九乘法表*/ for(var i = 1;i<=9;i++){ document.write("<table border='1' cellspacing='2'><tr>") for(var j=1;j<=i;j++){ doc...原创 2018-05-31 18:12:24 · 7604 阅读 · 0 评论 -
jQuery动态下划线导航
效果图示:代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>jQuery动画导航</title> <style> /*start nav*/ .nav{ position:relati原创 2018-06-10 17:27:14 · 1881 阅读 · 1 评论 -
raido全部取消选中
$('input[type=radio][name="smsType"]:checked').prop("checked", false);原创 2019-06-12 19:22:40 · 370 阅读 · 0 评论 -
HTML中使用marquee文字滚动
html文字滚动代码:代码如下滚动文字滚动文字滚动文字滚动文字marquee 参数: BGColor:滚动文本框的背景颜色。 Direction:滚动方向设置,可选择Left、Right、up和down。 scrolldelay:每轮滚动之间的延迟时间,越大越慢。 scrollamount:一次滚动总的时间量,数字越小滚动越慢。 Behaviou转载 2018-01-27 00:19:18 · 1440 阅读 · 0 评论 -
JS常用正则表达式
1、用户名:输入2-10个以字母开头的字串,可以有下划线 _ ,后面3-10位数字。/^[a-zA-Z]{2,10}[_]*[0-9]{3,10}$/2、密码:输入3-6个以字母开头的字串,后面3-9位数字。/^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/3、身份证号: /\d{17}\w{1}|\d{14}\w{1}/4、电子邮箱:/^(原创 2018-01-10 00:01:51 · 810 阅读 · 0 评论 -
JS判断密码强度
.strength{background-color:#E0E0E0;margin-left:5px;padding:0 20px;text-align: center;line-height: 20px;font-size: 12px;} 危险 一般 安全 $(function() { var a原创 2018-01-26 11:28:25 · 447 阅读 · 0 评论 -
HTML中超链接原来还有这种操作??
HTML中的a标签,即超链接,它对我们来说是最基础和最常见不过了,但是,我们有真正静下心来思考它了吗?往往最简单的事物却能带给我们更多的思考。我们经常用a标签来进行页面的跳转或锚点的使用。其实,a标签有五种使用方式,其不同点在于href属性的不同。(有这么多种操作???不可思议~请往下看!!)五种方式如下代码所示:点我跳转百度点我跳转百度点我跳转百度点我跳转百度点我跳转百度原创 2017-11-24 20:46:08 · 1392 阅读 · 0 评论 -
CSS3结合jQuery实现动画效果及回调函数
写期末项目中,朋友提出的 idea ,当用户登录成功时欢迎用户的特效,即欢迎用户信息从底部上升到页面中,之后再退回底部。他遇到的问题是:从底部能出来提示信息,但是出来之后就下不去了。听过后,考虑之,想到用回调函数来解决这个Bug,然后模拟登录成功时进入主页(即刷新页面),弹出欢迎信息并消失,写了一个类似这样的动画效果。仅供参考:效果如下:代码如下: 欢迎动画原创 2017-12-22 16:48:31 · 2465 阅读 · 0 评论 -
调用QQ官方JS插件实现省市区三级联动
今天收到园友信息,想问我要原来写的一个 《 纯JS省市区三级联动 》文章中最新的省市区数据。那个是老早以前搞的。记得数据是从数据库中提取生成的。一时也找不到当时的数据库了。我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下:何不直接使用的数据呢?惊喜的是QQ是使用引用外部JS来实现三级联动的。JS链接:转载 2017-12-23 17:43:09 · 476 阅读 · 0 评论 -
CSS3制作旋转的3D立方体
HTML、CSS3制作3D立方体效果图:全部代码: 3D立方体-刘鹏博 /* 设置视角 */ body {perspective: 1000px;} /* cube 参考父级 */ #cube {/*border: 2px solid red;*/width:200px;height: 200px;margin:200原创 2017-12-16 22:08:42 · 796 阅读 · 0 评论 -
CSS3中transition过渡属性的简单应用实例
我们在很多网站上看到一些当鼠标悬浮时,商品图片有一种放大的效果、盒子有上升、下降效果或者文字会偏移等等。这些其实都是增加用户体验的方式,那么,今天就以transition过渡属性来写一个比较通用且简单易懂的过渡效果。先看效果图: 其实,我们给图片、文字或者盒子设置鼠标悬浮hover属性,就会有一些悬浮效果。但是,那样不用过渡属性的话,用户体验很是不好,响应过于生硬,剧原创 2017-12-07 18:58:56 · 3850 阅读 · 0 评论 -
jQuery结合layerUI框架随机抽号网页版
随机抽取号码 网页版效果图:源代码下载地址:http://download.csdn.net/download/qq_40087415/10162206 主要运用layerUI框架结合jQuery写的一个随机抽取号码。第一次用layer框架,有所瑕疵望见谅,大家感兴趣的或者需要用到layer框架的也可以参考layUI文档手册,各种效果、怎样运用文档原创 2017-12-17 15:15:26 · 2344 阅读 · 0 评论 -
HTML5中几种meta标签的含义及使用(含移动端)
1、这是指定双核浏览器,默认以何种方式渲染页面。//默认webkit内核//默认IE兼容模式//默认IE标准模式而 webkit|ie-comp|ie-stand 这种写法,跟font-family的规则类似,按照顺序排他的优先级,不支持则往下,浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。目前支持对其提供支持的浏览器有:3602、这是一个文档兼容原创 2017-12-26 19:51:00 · 6651 阅读 · 0 评论 -
HTML5中label标签对input元素标注的使用方法
HTML 标签:W3C标准定义: 标签为 input 元素定义标注(标记)。 label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。用法: 标签的 for 属性应当与相关元原创 2017-12-27 15:56:25 · 8590 阅读 · 2 评论 -
JS的事件冒泡和事件捕获
结论:他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。转载 2018-01-21 14:15:51 · 203 阅读 · 0 评论 -
H5中canvas使用方法及案例
转自:http://blog.csdn.net/u014607184/article/details/51746384转载 2018-01-25 13:03:00 · 1237 阅读 · 0 评论 -
WebStorm 2017.3.4激活破解方法
webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊。注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址:http://idea.codebeta.cn (新,感谢Rachelsalaheiyo提供)http://idea.imsxm.com/转载 2018-02-01 14:25:37 · 5297 阅读 · 0 评论 -
Iconfont矢量图图标怎么使用带图详解
我们经常在网上看到的一些好看的小图标,很多其实它不是img、png图片,而是矢量图。那什么是矢量图呢?先简单普及一下:计算机中显示的图形一般可以分为两大类——矢量图和位图。矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。矢量图形最大的优点是无论放大、缩小或旋转等不会失真;最大的缺点是难以表现色彩层次丰富的逼真图像效果。原创 2017-11-02 13:36:52 · 5780 阅读 · 0 评论