html动态显示背景颜色,js动态修改背景颜色方法汇总
本文介绍了js动态修改背景颜色的多个方法,如何用javascript控制或修改网页背景呢,这需要用到javascript操作鼠标事件及css样式的方法。
一、js改变动态背景颜色
一个div来显示背景颜色,一个颜色框来输入16进制颜色值,一个按钮来激发事件。原本div背景色为白色,输入颜色值之后按按钮,div背景色会从当前颜色动画过渡到目标颜色。
点击后就是这样一个状态,但是截图没有动画效果,附上源代码:
(新浪博客贴出来的代码会给修改掉:
getElementByIdx_x (id); 多了“x_x”;
string.substr(array[x] ,1); 少了“% 16”;
例子:
代码示例:
Color
body{ background:#CCCCCC;}
.color{ background-color:#ffffff; color:#000000; height:200px; width:300px;}
function $(id){
return document.getElementByIdx_x_x_x_x (id);
}
function gs(obj,name){
return (obj.currentStyle)?obj.currentStyle[name]:window.getComputedStyle(obj,null)[name];
}
function h2rgb(h){
var string="0123456789abcdef";
var array=new Array(3);
for(var x=0;x<3;x++){
array[x]=h.slice(x*2,x*2+2);
var i=array[x].slice(0,1);
var j=array[x].slice(1);
array[x+3]=string.indexOf(i)*16+string.indexOf(j);
}
return array.slice(3,6);
}
function rgb2h(array){
var string="0123456789abcdef";
var h="";
for(var x=0;x<3;x++){
h+=string.substr(Math.floor(array[x]/16),1)+string.substr(array[x] ,1);
}
return h;
}
function change(array,array2){
var key=5;
var step=new Array(3);
for(var x=0;x<3;x++){
//step[x]=array[x]+Math.ceil((array2[x]-array[x])/5);
if(array2[x]-array[x]>0&&array[x]+key
step[x]=array[x]+key;
else if(array2[x]-array[x]<0&&array[x]-key>array2[x])
step[x]=array[x]-key;
else
step[x]=array2[x];
}
return step;
}
function color(){
var timer;
if(!$("box").currentStyle){
var array=gs($("box"),"backgroundColor").slice(4,-1).split(",");//split后字符数组
array=h2rgb(rgb2h(array));
}
else{
var array=h2rgb(gs($("box"),"backgroundColor").slice(1));
}
var array2=h2rgb(document.form.input1.value);
if((array[0]!=array2[0])||(array[1]!=array2[1])||(array[2]!=array2[2])){
$("box").style.backgroundColor="#"+rgb2h(change(array,array2));
clearTimeout(timer);
timer=setTimeout(color,100);
}
else{
clearTimeout(timer);
$("box").style.backgroundColor="#"+rgb2h(array2);
}
}
其主要功能都用函数来分割:
$(id)用id获取元素;
gs(obj,name)根据对象获取元素样式;
h2rgb(h)16进制颜色值转换成rgb颜色值用数字型数组返回;
rgb2h(array)rgb颜色值转换成16进制颜色值用字符串形式返回;
change(array,array2)将原颜色值array转换到目标颜色array2,key可以动画变换速度;
color()获取当前颜色以及目标颜色后调用change(array,array2)同时递归产生动画。
兼容FF,IE6/7/8,其中兼容点有:
1、FF跟IE获取样式表
2、FF得到的颜色值为RGB,而IE得到的却是十六进制字符串
二、javascript动态修改背景颜色
代码示例:
Background Color Changer
Set the background color
onclick = "BG_yellow()">
onclick = "BG_thistle()">
onclick = "BG_plum()">
onclick = "BG_red()">
三、 js实现的动态背景渐变
1、放置图片的div:
代码示例:
2、js设置时间
代码示例:
window.onload = function () {
var scrollBackground = {
object: document.getElementById("scrollBackground"),
endTop: 3657,
nowTop: 0
};
var scrollInterval = setInterval(function () {
scrollBackground.nowTop = (scrollBackground.nowTop != scrollBackground.endTop) ? (scrollBackground.nowTop + 1) : 0;
scrollBackground.object.style.backgroundPosition = "0px -" + scrollBackground.nowTop + "px";
}, 50);
}
div高度可以自己改,宽度最大支持1680。
html动态显示背景颜色,js动态修改背景颜色方法汇总相关推荐
- android更改menu字体颜色,Android动态修改menu颜色
昨晚有人在群里问怎么动态修改menu的颜色 关键对方还说在网上百度了3个小时了,依然没有解决问题 我知道,轮到我出手了
- javascript 动态修改css样式方法汇总(四种方法)
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
- android 状态栏一体化 fragment,单Activity多Fragment动态修改状态栏颜色功能
目录介绍 1.关于如何集成 2.关于如何使用 3.关于鸣谢 4.关于版本更新说明 5.关于其他介绍 0.说明 状态栏工具类,应该可以满足绝大多数的使用场景.具体可以参考代码案例,欢迎star!! 1. ...
- Android界面全屏适配7.0、动态修改状态栏颜色、浅色状态栏深色字体
https://www.jianshu.com/p/e93787e23d3b 在需要置顶的界面添加主题TopTheme 为了适配要创建多个value文件夹,名称不能错 styles.xml <! ...
- JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案
JS动态修改页面EasyUI datebox不生效.EasyUI动态添加Class.EasyUI动态渲染解析解决方案 参考文章: (1)JS动态修改页面EasyUI datebox不生效.EasyUI ...
- js动态修改表格数据
js动态修改表格数据 使用js在表格个内进行动态修改,需要再点击每一个td的时候在每个td里动态的添加一个input文本框 然后把input的样式设计一下与td的宽度和高度一致去掉input的内外边框 ...
- 动态修改 xm-select 颜色
动态修改 xm-select 颜色 在初始化xmSelect 后将其储存起来 这是储存起来的内容,我们可以直接修改theme内的color去改变xmSelect标签的颜色 这个也可以适用于其他内容
- 微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- JS动态修改单网页web应用在微信浏览器中的title
利用JS动态修改单网页web应用在微信浏览器中的title 最近做一个微信端项目,主要内容都是采用单页面web,之前做微信端,以营销H5居多,绝大多数也都是单网页,营销H5一般一个标题通吃,修改分享标 ...
- js动态修改@keyframes
js动态修改@keyframes 封装getKeyframes()函数 function getKeyframes(keyframesName){//通过定义的动画函数名来查询函数let styleS ...
最新文章
- TYVJ P1091 等差数列 Label:dp
- zblog文件大小超出,上传成功但插入不了
- 关于Kanas.Net框架的一些背景
- RedHat Linux 启动FTP
- 【Maven】3.使用IntelliJ IDEA 使用本地搭建的maven私服,而不是使用默认的maven设置...
- fib函数用python编写求第n项_第6章函数-4 使用函数输出指定范围内Fibonacci数的个数|简明python教程|python入门|python教程...
- 服务器虚拟化的毕业设计,云桌面技术研究与应用毕业设计论文+开题报告+翻译+源码...
- Python Tricks —— 计算 1+1/2+1/4+...=2
- Jenkins创建新任务
- 关于Android Studio使用高德地图地位
- latex论文模板_国内高校LaTeX学位论文模版大全
- 计算机联锁常见的故障,计算机联锁系统常见故障及处理方法.doc
- 在椭球面上使用球面坐标系法做三重积分
- fadeOut和fadeIn
- “弹出DVD驱动器错误”解决方法
- python花瓣长度和花瓣宽度散点图鸢尾花_matplotlib可视化操作及案例分析
- word文档使用技巧
- SocialFi 何以成就 Web3 去中心化社交未来
- Log4J的入门简介学习【转】
- 2019年_BATJ大厂面试题总结-华为篇
热门文章
- Python 之关键字(保留字)
- 硬件笔记-贴片元器件焊接
- android手机锁屏密码忘记,安卓手机锁屏密码忘了怎么办 解决锁屏密码六种方法介绍...
- 利用PMOS实现LED恒流驱动芯片的通断控制
- 【Tableau server7.0_私人版本】Tableau Server Certified Associate(Tableau CA) 考前预备
- 网页打印服务器无法创建对象,打印问题,小编教你怎么解决automation服务器不能创建对象...
- Linux下点阵汉字的字模读取与显示
- JavaScript 中 typeof 和 instanceof 的区别及如何判断数组
- ICP算法学习笔记(原理加公式理解)
- 用html设计logo,网页设计中的logo设计方法