随机更改盒子透明度

需要素材点击图片联系我或私信、评论

效果图

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>随即更改盒子透明度</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}#box{width: 700px;height: 500px;border: 7px solid #cccccc;margin: 70px auto;text-align: center;color: #cccccc;padding-top: 130px;font-size: 169px;font-family: 方正舒体;}body {background-image: url(img/big2.jpg);background-size: cover;}</style>
</head>
<body>
<div id="box">Hello!</div>
<script src="common.js"></script>
<script>my$("box").onclick = function (){my$("box").style.backgroundColor = getRandomColor();}
</script>
</body>
</html>

commom.js

// 通过id名获取的元素
function my$(id) {return document.getElementById(id);
}//通过标签名获取的元素
function ele$(element) {return document.getElementsByTagName(element);
}//设置任意的标签中的任意文本内容
function setInnerText(element, text) {//判断是否支持这个属性if(typeof element.textContent == "undefined"){console.log(element.textContent+"====");//说明不支持element.innerText = text;}else{console.log(element.textContent);element.textContent = text;}
}//封装 获取任意标签中的文本内容. 需要返回值
function getInnerText(element){if(element.textContent == undefined){return element.innerText;}else{return element.textContent;}
}//封装一个获取任意一个父级元素的第一个子元素
function getFirstElementChild(parentElement) {if(parentElement.firstElementChild){//隐式布尔类型转换 --->true//如果支持return parentElement.firstElementChild;}else{return parentElement.firstChild;}
}//为任意元素，绑定任意事件，执行任意的处理函数
function addEventListener(element,type,fn){//判断是不是支持这个方法  对象.方法名同样可以判断if(element.addEventListener){element.addEventListener(type,fn,false);}else if(element.attachEvent){element.attachEvent("on" + type,fn);}else{element["on" + type] = fn;}
}//颜色值固定，只更改透明度的函数
function getRGB()
{var opacity = "";opacity = Math.floor(Math.random()*10)/10;return opacity;
}
// 颜色值随机，透明度也随机
function getRandomColor()
{var str = "rgba(";var opacity = "";for (var i =0;i<3;i++){str+=Math.floor(Math.random() * 255)+",";}opacity = Math.floor(Math.random()*10)/10;str=str+opacity+")";console.log(str);return str;
}

【Web】Web-API（No.62）DOM案例（一）随机更改盒子透明度相关推荐

web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
Web APIs，BOM树，声明dom对象，年会抽奖案例，随机图片，表单，用户注册倒计时，innerHTNL，classList的使用
介绍严格意义上讲,我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系,ECMAScript 简称 ES 它提供了一套语言标准规范,如变量.数据类型.表达式.语 ...
javaScript进阶webAPI web前端api进阶DOM、BOM学习笔记day01
一.Web_API 基础认知 1. 作用和分类作用:使用js去操作html和浏览器分类:DOM (文档对象模型)BOM(浏览器对象模型) 2. DOM DOM(document Object Mo ...
CSS Animations vs Web Animations API
作者:Ollie Williams 原文:CSS Animations vs Web Animations API 在 JavaScript 有一个原生动画 API 叫 Web Animations ...
JavaScript是如何工作的：编写自己的Web开发框架 + React及其虚拟DOM原理
摘要: 深入JS系列19. 原文:JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门 ...
Web性能API——帮你分析Web前端性能
开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户端浏览设备的出现与网站功能的日益复杂化,对于性能的专注也 ...
百度鹰眼Web服务API开发使用教程
文章目录 @[toc] 百度地图开发 - 鹰眼轨迹一. 准备工作二. 开发流程 [全程官方讲解文档](http://lbsyun.baidu.com/index.php?title=yingyan ...
百度鹰眼html打开,BMap：WEB 服务API
ylbtech-Map-Baidu: WEB 服务API 百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的 ...
什么？你还不知道Web Animations API
JavaScript 中有一个用于动画的原生 API,称为 Web Animations API.在这篇文章中,我们将其称为 WAAPI. 在本文中,我们将比较 WAAPI 和用 CSS 完成的动画. ...

【Web】Web-API（No.62）DOM案例（一）随机更改盒子透明度

随机更改盒子透明度

效果图

index.html

commom.js

【Web】Web-API（No.62）DOM案例（一）随机更改盒子透明度相关推荐

最新文章

热门文章