JS
约嫦娥烤兔子
这个作者很懒,什么都没留下…
展开
-
图片上传并预览
思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src。如下图所示,是原始的按钮样式:美化步骤:(1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上。或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合。(2)给上传...原创 2018-08-05 09:23:00 · 20985 阅读 · 2 评论 -
短信验证码倒计时
此功能要实现点击“获取验证码”按钮后,开始进行倒计时,一分钟后才能重新发送,除了让按钮样式发生变化外,还要保证,在点击后再重复点击时不能让后台接收到点击事件,也就是说让点击按钮失效。 下面为具体的代码实现过程,(此代码中使用了AUI框架,只影响样式,不会对功能造成影响。此处提供AUI官网地址:http://www.auicss.com/) HTML代码:...原创 2018-08-01 09:36:30 · 854 阅读 · 2 评论 -
一键复制粘贴
一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js。官网地址:https://clipboardjs.com下载到本地后,将其放入项目中,直接引用即可。具体实现代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g...原创 2018-08-06 09:40:07 · 4116 阅读 · 0 评论 -
提示信息弹出(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 · 24380 阅读 · 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 · 3506 阅读 · 3 评论 -
好看的图片轮播
图片轮播使用简单的原生JS,更换 <img>的url就可以,但是这样做出来的不够美观,此处介绍两种方式来对图片轮播进行美化。(在我的博文中多次提到了AUI框架,我会在下一篇文章中详细介绍一下AUI。AUI官网地址:http://www.auicss.com)第一种:使用AUI框架完成图片轮播首先在HTML文件中引入以下文件:<link rel="styleshee...原创 2018-08-03 10:10:06 · 2099 阅读 · 0 评论 -
有弹出层时创建遮罩层并禁止屏幕滚动
在点击登录注册后通常要创建遮罩层,使整个屏幕只能操作登录窗口部分的内容。首先需要设置弹出框的z-index值为3,使弹出层距离用户更近。还需要创建一个div宽高占满整个屏幕,用来做遮罩层。(z-index=2)。同时设置这两个div都隐藏,当触发点击事件时再显示。HTML代码: <a class="navigation1-a" onclick="show_Win('registe...原创 2018-09-08 16:07:32 · 1126 阅读 · 0 评论 -
web图片加水印
在前端给图片加水印的方法有很多种:法一:js+canvas,使用H5新增元素canvas(画布)加水印。使用此方法,用户可以在页面上自定义水印内容。代码如下:<body> <canvas id="shuiyinTest" width="500" height="500"></canvas> <!--画布,图片放在此处--...翻译 2019-09-17 17:35:06 · 787 阅读 · 0 评论