案例:点击按钮设置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. 深入理解.NET Core的基元(三) - 深入理解runtimeconfig.json

    原文:Deep-dive into .NET Core primitives, part 3: runtimeconfig.json in depth 作者:Nate McMaster 译文:深入理解 ...

  2. master节点的部署介绍和前置工作

    目录 组件介绍 组件介绍 kubernetes master节点运行组件如下: kube-apiserver.kube-scheduler.kube-controller-manager.kube-n ...

  3. 分发系统介绍、expect脚本远程登录、expect脚本远程执行命令、expect脚本传递参数

    7月19日任务 20.27 分发系统介绍20.28 expect脚本远程登录20.29 expect脚本远程执行命令20.30 expect脚本传递参数 20.27 分发系统介绍 公司业务逐渐扩大时, ...

  4. Vue-Router中History模式【华为云分享】

    [摘要] vue-router的history模式的服务端支持 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端> ...

  5. 转:MySQL下载安装、配置与使用(win7x64)

    1 第一大步:下载. a.俗话说:“巧妇难为无米之炊”嘛!我这里用的是 ZIP Archive 版的,win7 64位的机器支持这个,所以我建议都用这个.因为这个简单嘛,而且还干净. 地址见图 拉倒最 ...

  6. MySQL必知必会(Select)

    SELECT prod_name FROM products; SELECT prod_id, prod_name, prod_price FROM products; SELECT * FROM p ...

  7. python使用mysql的一些坑

    注意:如果你用的是python3.x,直接去看第四个问题 遇到的第一个问题 正常来说直接执行pip安装,就是可以的,但是MySQL-python偏偏比较独特 pip install MySQL-pyt ...

  8. Seata AT 模式启动源码分析

    从上一篇文章「分布式事务中间件Seata的设计原理」讲了下 Seata AT 模式的一些设计原理,从中也知道了 AT 模式的三个角色(RM.TM.TC),接下来我会更新 Seata 源码分析系列文章. ...

  9. MyBatis三个查询方法_selectList_selectOne_selectMap

    mybatis-cfg.xml的配置: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE co ...

  10. 小程序使用wxs解决wxml保留2位小数问题

    1.出现溢出表现 从图中可以看到数字超出了很长长度.代码里面是如下这样的.为什么在0.35出现?或者一些相成的计算出现? 而 0.34却不会.(wap.0834jl.com) 0.41 也会出现,好像 ...