案例:点击按钮设置div背景色渐变

背景色渐变:设置透明度

  <div id="dv"></div>
<input type="button" value="渐变" id="btn" />
<script src="common.js"></script>
<script> my$("btn").onclick = function () {
var opacity = 10;
var timeId = setInterval(function () {
//透明化了
opacity--;
if (opacity <= 0) {
clearInterval(timeId);////清理定时器
}
//设置div的透明度
my$("dv").style.opacity = opacity / 10;
}, 200);
}; </script>

JS---案例:点击按钮设置div背景色渐变的更多相关文章

  1. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  2. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  3. 点击按钮改变div背景色,再次点击恢复 -- 原生JS

    如果对您有帮助,记得点个赞哦!

  4. CSS设置DIV背景色渐变

    div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...

  5. js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  6. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  7. js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  8. 原生JS 实现点击按钮创建元素

    要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...

  9. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

随机推荐

  1. JS三座大山再学习(三、异步和单线程)

    本文已发布在西瓜君的个人博客,原文传送门 前言 写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰:同时也让我坚定了要写出一篇好的关于JS异步. ...

  2. 内核升级在线安装报错:Could not retrieve mirrorlist http://mirrors.elrepo.org/mirrors-elrepo-kernel.el7 error was14: curl#6 - "Could not resolve host: mirrors.elrepo.org; 未知的错误"

    修改网卡配置 [root@localhost ~]# vim /etc/sysconfig/network-scripts/ifcfg-ens32 BOOTPROTO="none" ...

  3. c#-PropertyChangingEventArgs

    MSDN 解释连接:https://msdn.microsoft.com/zh-cn/library/system.eventargs.aspx#inheritanceContinued[Serial ...

  4. Hadoop streaming脚本中约束关系参数详解

    1 -D mapred.output.key.comparator.class=org.apache.hadoop.mapred.lib.KeyFieldBasedComparator \ 2 -D ...

  5. 相对和绝对路径、cd命令、创建和删除目录、rm命令 使用介绍

    第2周第1次课(3月26日) 课程内容:2.6 相对和绝对路径2.7 cd命令2.8 创建和删除目录mkdir/rmdir2.9 rm命令 2.6相对和绝对路径 任何一个文件都有一个从根开始的路径,绝 ...

  6. 修改python3导致终端打不开

    误操作将/usr/bin/python3文件修改,或者删除,导致终端打不开, 解决办法其实很简单,ctrl+alt+f3进入命令窗口,将python2.7的文件拷贝到python中就可以解决了 sud ...

  7. Netty学习——protoc的新手使用流程

    Netty学习——protoc的新手使用流程 关于学习的内容笔记,记下来的东西等于又过了一次脑子,记录的更深刻一些. 1. 使用IDEA创建.proto文件,软件会提示你安装相应的语法插件 安装成功之 ...

  8. Python的Requests库基本方法函数

    一.Requests 库的七个常用函数: 1. requests.request(method,url,**kwargs) :method:请求方式,对应get/put/post等七种 :拟获取页面的 ...

  9. JsonSchmea用法

    JsonSchmea用法 简介 JSON Schema是基于JSON格式,用于定义JSON数据结构以及校验JSON数据内容. JSON Schema官网地址:http://json-schema.or ...

  10. React Native--Animated:`useNativeDriver`is not supported because the native animated module is missing

    目录 问题描述 解决方法 问题描述 react-native init 项目,在运行中报错 解决方法 打开Xcode项目,点击Libraries文件夹右键Add Files to "项目名& ...