- 博客(14)
- 收藏
- 关注
翻译 web图片加水印
在前端给图片加水印的方法有很多种:法一:js+canvas,使用H5新增元素canvas(画布)加水印。使用此方法,用户可以在页面上自定义水印内容。代码如下:<body> <canvas id="shuiyinTest" width="500" height="500"></canvas> <!--画布,图片放在此处--...
2019-09-17 17:35:06 788
原创 有弹出层时创建遮罩层并禁止屏幕滚动
在点击登录注册后通常要创建遮罩层,使整个屏幕只能操作登录窗口部分的内容。首先需要设置弹出框的z-index值为3,使弹出层距离用户更近。还需要创建一个div宽高占满整个屏幕,用来做遮罩层。(z-index=2)。同时设置这两个div都隐藏,当触发点击事件时再显示。HTML代码: <a class="navigation1-a" onclick="show_Win('registe...
2018-09-08 16:07:32 1126
原创 DOM节点详解
HTML 文档中的所有内容都是节点:整个文档是一个文档节点;每个 HTML 元素是元素节点;HTML 元素内的文本是文本节点;每个 HTML 属性是属性节点;注释是注释节点。节点树的根节点为<html>,节点树之间的关系有父,子,同胞。一些 DOM 对象属性:innerHTML 节点(元素)的文本值parentNode 节点(元素)的父节点childNo...
2018-08-12 10:11:19 327
原创 字体图标,web页面常用图标
在web开发过程中,我们常常需要用到图标,在一些前端框架中,也会带有自己的图标库,但是可能不够全面,这里我给大家街上一个我常用的图标库:阿里巴巴矢量图标库。官网地址:http://www.iconfont.cn/首先,我们需要登录,使用guihub账号,或者使用新浪微博账号登录就可以。登录后,在图标管理中选择“我的项目”,如下图所示: 选择新建项目的图标,新建一个项目。然后在阿...
2018-08-11 15:32:32 3093
原创 网页标题前面的logo怎么设置
首先要选好一张准备作为logo的图片,然后将其转化为.ico格式。给大家分享一个在线转.ico的网站:http://cn.faviconico.org/将图片转化完成后下载到本地。将其放入你的web项目中。然后在HTML文件的<head></head>标签内,插入一行代码:<link rel="shortcut icon" href="../img...
2018-08-08 10:11:38 7517 1
原创 商品抢购倒计时(天,时,分,秒)
在这里案例中需要用到JS方法:Date(),parseInt(),getTime()。先对这三个方法做些介绍。Date()方法:可返回当天的日期和时间。用法:var newTime = new Date();也可用来定义一个时刻,写法如下:var outTime = new Date("2018/08/12 12:00:00");//年月日之间可以用“/”,也可以用“-”p...
2018-08-07 09:50:09 3507 3
原创 一键复制粘贴
一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js。官网地址:https://clipboardjs.com下载到本地后,将其放入项目中,直接引用即可。具体实现代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g...
2018-08-06 09:40:07 4120
原创 图片上传并预览
思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src。如下图所示,是原始的按钮样式:美化步骤:(1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上。或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合。(2)给上传...
2018-08-05 09:23:00 20990 2
原创 AUI框架的介绍和使用
简单来说,AUI框架就是一个用于移动端开发的前端框架,能够为你的移动端开发节省很多时间,并且为你提供好看的样式和更好的用户体验。如果想要进AUI官网查看详细的介绍,请点这里。作为一个前端程序员,会使用框架是必须的。框架让你的代码更简洁。下面来介绍一下AUI框架的使用过程。 第一步:下载AUI2.1这是AUI框架的官网,首先我们需要点击下载AUI2.1按钮.下载的是一个压缩包,将解压...
2018-08-04 10:27:14 23441 1
原创 好看的图片轮播
图片轮播使用简单的原生JS,更换 <img>的url就可以,但是这样做出来的不够美观,此处介绍两种方式来对图片轮播进行美化。(在我的博文中多次提到了AUI框架,我会在下一篇文章中详细介绍一下AUI。AUI官网地址:http://www.auicss.com)第一种:使用AUI框架完成图片轮播首先在HTML文件中引入以下文件:<link rel="styleshee...
2018-08-03 10:10:06 2100
原创 提示信息弹出(toast)
使用普通的alret();可以实现弹出框,但是不够美观。移动端框架AUI提供了一种弹出样式,AUI官网地址:http://www.auicss.com/实现过程如下:第一步:在<head>里引入AUI的css和toast.js文件。<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css...
2018-08-02 09:46:22 24392 1
原创 短信验证码倒计时
此功能要实现点击“获取验证码”按钮后,开始进行倒计时,一分钟后才能重新发送,除了让按钮样式发生变化外,还要保证,在点击后再重复点击时不能让后台接收到点击事件,也就是说让点击按钮失效。 下面为具体的代码实现过程,(此代码中使用了AUI框架,只影响样式,不会对功能造成影响。此处提供AUI官网地址:http://www.auicss.com/) HTML代码:...
2018-08-01 09:36:30 854 2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人