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