(javascript)如何让用户自由控制html页面大段文字的行间距和背景颜色
2007-01-22 08:49
405 查看
人性化小技巧:(javascript)如何让用户自由控制html页面大段文字的行间距和背景颜色:
示例:
http://www.universecommerce.com/newtower/new.htm
行间距:
<script> var hjj=22; </script>
<a href="javascript:;" onClick="hjj++;document.body.style.lineHeight=hjj+'px';">行间距+</a> <a href="javascript:;" onClick="hjj--;document.body.style.lineHeight=hjj+'px';">行间距-</a><br>
背景色:
在<style type="text/css">中如果定义了body {的背景颜色,可能导致无法鼠标获取颜色getColorTest()
<script>
//获取颜色测试, 背景颜色
var isOpen = false;
var vBlue = 0;
function getColorTest()
{
var a,b,c,x,y;
o = document.all('nouseIsGetColor');
if( null == o )
return;
if( false == o.checked )
{
if( isOpen )
{
//document.bgColor = "#ffffff";
isOpen = false;
}
return;
}
document.body.background="";
x = event.x; y = event.y;
//
x = Math.round( 256 * x / (screen.availWidth-90) );
y = Math.round( 256 * y / (screen.availHeight-120) );
//
a = x; // a = ( x - y/2 );
b = y; // b = ( y/2 ) ;
c = vBlue; //c = ( 0.7 * y );
vBlue += 10 * Math.random();
a = a % 255; b = b % 255; c = c % 255;
//
//a = x % 255; b = y % 255; c = ( x+y ) % 255;
//
a = Math.round(a); b = Math.round(b); c = Math.round(c);
if( null != document.bgColor )
document.bgColor = "rgb("+a+","+b+","+c+")";
window.status = 'r=' + a + ' g=' + b + ' b=' + c ;
o = document.all('nouseColorTest');
if( null != o )
{
o.value = document.bgColor;
o.value = o.value.substr(1,o.value.length);
isOpen = true;
}
}
</script>
<body onMouseMove="javascript:getColorTest();">
自由改变背景颜色
<input name="nouseIsGetColor" type="checkbox" value="checkbox" class="cb" title="鼠标随处移动,颜色确定后按空格键生效">
背景颜色值
<input name="nouseColorTest" type="text" size="8" maxlength="250" onBlur="if(this.value!='') document.bgColor=this.value;" title="可以人工输入值,焦点离开后,颜色值生效">
按空格确定
<a href="javascript:;" onClick="location.reload();">还原</a>
示例:
http://www.universecommerce.com/newtower/new.htm
行间距:
<script> var hjj=22; </script>
<a href="javascript:;" onClick="hjj++;document.body.style.lineHeight=hjj+'px';">行间距+</a> <a href="javascript:;" onClick="hjj--;document.body.style.lineHeight=hjj+'px';">行间距-</a><br>
背景色:
在<style type="text/css">中如果定义了body {的背景颜色,可能导致无法鼠标获取颜色getColorTest()
<script>
//获取颜色测试, 背景颜色
var isOpen = false;
var vBlue = 0;
function getColorTest()
{
var a,b,c,x,y;
o = document.all('nouseIsGetColor');
if( null == o )
return;
if( false == o.checked )
{
if( isOpen )
{
//document.bgColor = "#ffffff";
isOpen = false;
}
return;
}
document.body.background="";
x = event.x; y = event.y;
//
x = Math.round( 256 * x / (screen.availWidth-90) );
y = Math.round( 256 * y / (screen.availHeight-120) );
//
a = x; // a = ( x - y/2 );
b = y; // b = ( y/2 ) ;
c = vBlue; //c = ( 0.7 * y );
vBlue += 10 * Math.random();
a = a % 255; b = b % 255; c = c % 255;
//
//a = x % 255; b = y % 255; c = ( x+y ) % 255;
//
a = Math.round(a); b = Math.round(b); c = Math.round(c);
if( null != document.bgColor )
document.bgColor = "rgb("+a+","+b+","+c+")";
window.status = 'r=' + a + ' g=' + b + ' b=' + c ;
o = document.all('nouseColorTest');
if( null != o )
{
o.value = document.bgColor;
o.value = o.value.substr(1,o.value.length);
isOpen = true;
}
}
</script>
<body onMouseMove="javascript:getColorTest();">
自由改变背景颜色
<input name="nouseIsGetColor" type="checkbox" value="checkbox" class="cb" title="鼠标随处移动,颜色确定后按空格键生效">
背景颜色值
<input name="nouseColorTest" type="text" size="8" maxlength="250" onBlur="if(this.value!='') document.bgColor=this.value;" title="可以人工输入值,焦点离开后,颜色值生效">
按空格确定
<a href="javascript:;" onClick="location.reload();">还原</a>
相关文章推荐
- 小技巧:(javascript)如何让用户自由控制html页面大段文字的行间距和背景颜色
- 如何让动态创建的页面元素响应用户事件 (HTML/javascript/jQuery/Ajax/DOM)
- [JavaScript]如何控制页面框架大小变化
- Android混合开发之Activity类与html页面之间的相互跳转之Android:如何使用addJavaScriptInterface
- ios开发学习-页面控制样式翻页、文字、颜色等效果源码分享
- 坑人的MyEclipse之-修改JSP页面的JavaScript背景颜色
- Html 设置整个页面的背景颜色
- 【JavaScript】轻易改变的背景和字体颜色页面
- 持续讨论 javascript 如何控制优化页面 js 加载顺序
- iOS7如何定制化导航栏背景,标题和返回按钮文字颜色
- 如何让CSS控制HTML页面
- JavaScript控制网页背景随机不停的变换颜色
- jquery 控制html页面表格当中奇偶行颜色不同 鼠标悬停变色
- 用户控件中如何用javascript获得页面上的元素ID(CSDN朋友帮助解决的)
- 如何禁止用户选取页面中的文字
- HTML输出 一 控制列背景颜色
- 如何通过广域网控制Tiny6410开发板上的html页面
- myEclipse如何修改javascript里背景颜色
- 如何改变状态栏文字和背景颜色
- 用javascript实现控制打开网页窗口的大小 和HTML如何关闭窗口的技巧大全