JS实现在页面随时自定义背景颜色的方法


Posted in Javascript onFebruary 27, 2015

本文实例讲述了JS实现在页面随时自定义背景颜色的方法。分享给大家供大家参考。具体实现方法如下:

<HTML>

<HEAD>

<TITLE>JS实现在页面随时自定义背景颜色</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

//以下代码将输入框及其所在的层写进窗口。

document.writeln('<div align="center" id=bgcolortestdiv style="BACKGROUND-COLOR: gray;POSITION: absolute;width: 200; height: 70; top=100; Z-INDEX: 100" >');

document.writeln('<p><B><font size=2>输入颜色代码<br>可以即时改变背景色</font></b></p>');

document.writeln('<p><input type="text" name="text" onkeyup="cbgcolor(this.value)"></p>');

document.writeln('</div>');

function cbgcolor(color){   //change background color

 if (color != '')

 document.bgColor=(''+color+'');  //设置背景颜色

}

function keepdivpos(){    //keep div position

document.all.bgcolortestdiv.style.pixelTop=parseInt(document.body.scrollTop)+100 //计算并设置层的相对位置

}

setInterval('keepdivpos()',100)   //设定自动改变层位置的时钟。

// End -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
element el-input directive数字进行控制
Oct 11 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 #Javascript
Jquery中Event对象属性小结
Feb 27 #Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 #Javascript
JS实现往下不断流动网页背景的方法
Feb 27 #Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 #Javascript
asp.net+js实现金额格式化
Feb 27 #Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 #Javascript
You might like
php开启openssl的方法
2014/05/15 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
简述Python2与Python3的不同点
2018/01/21 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Python中文编码知识点
2019/02/18 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
毕业自我鉴定书
2014/03/24 职场文书
农行心得体会
2014/09/02 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
2015年教师新年寄语
2014/12/08 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android