案例:点击按钮设置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. 【集训Day3 单调队列】【2018寒假集训Day 5更新】最大子序列和

    最大子序列和(maxsum) [问题描述] 输入一个长度为n的整数序列(A1,A2,……,An),从中找出一段连续的长度不超过M的子序列,使得这个序列的和最大. 例如: 序列 1, -3, 5, 1, ...

  2. jquery浅复制和深复制区别

    jquery浅复制和深复制区别

  3. Java 理论与实践: 处理 InterruptedException【转】

    这样的情景您也许并不陌生:您在编写一个测试程序,程序需要暂停一段时间,于是调用Thread.sleep().但是编译器或 IDE 报错说没有处理检查到的InterruptedException.Int ...

  4. 浅谈ZooKeeper基本原理与源码分析

    最近一直有小伙伴私信我,问一些关于Zookeeper的知识,下边关于的Zookeeper的知识整理了一下,一起学习一下. 看完本文对于Zookeeper想深入全面了解的读者朋友们,小编这里整理了一份更 ...

  5. js如何衔接css3的多个@keyframes动画?

    css3特效动画,我们在编写页面中经常遇到,而且是在同一个div模块上有多个衔接的不同动画,css中,我们经常使用animation-delay (规定在动画开始之前的延迟)进行处理. 那么,下面分享 ...

  6. Spring面试题集锦(精选)

    以下来自网络收集,找不到原文出处.此次主要为了面试收集,希望对大家有所帮助~~~~ 1.什么是Spring? Spring是一个开源的Java EE开发框架.Spring框架的核心功能可以应用在任何J ...

  7. SpringBoot原理讲解

    一.问题的引入 首先我们来看一个最简单的例子. 我们先创建一个SpringBoot的工程,如何创建一个SpringBoot工程就不说了,不会请自行解决.然后写一个controller类,通过请求路径, ...

  8. 如何把图片变得炫酷多彩,Python教你这样实现!

    有趣的图片 如何能让图片变得好玩?首先需要让它动起来!可如果是多张图片,我们还可以将其拼接起来组成gif动图,可一张图怎么玩?记得之前写过一个小练习,把一张图片拆分成九宫格的分片图.那么,能否由此下手 ...

  9. Hyperledger Fabric 动态增加组织到网络中

    本文基于Hyperledger Fabric 1.4版本. 官方文档地址:传送门 动态添加一个组织到Fabric网络中也是一个比较重要的功能.官方文档写的已经很详细了,有能力的尽量还是看官方文档,本文 ...

  10. HTML <input> placeholder 属性

    css ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mo ...