标题: [系统相关] [已解决]hta代码,如何根据显示器屏幕尺寸/分辨率智能调整文字的位置和大小? [打印本页]
作者: ygqiang 时间: 2016-3-17 06:41 标题: [已解决]hta代码,如何根据显示器屏幕尺寸/分辨率智能调整文字的位置和大小?
[已解决]hta代码,如何根据显示器屏幕尺寸/分辨率,智能调整。
hta代码,需要解决的问题主要是:
1、让时间居中、尽量最大化字体显示在屏幕中间。
2、任何尺寸大小/任何分辨率高低的显示器。
都能全屏/居中/尽量大字体显示。
能够根据显示器屏幕尺寸/分辨率,智能调整。
作者: ygqiang 时间: 2016-3-17 06:42
想要显示的效果如下
作者: ygqiang 时间: 2016-3-17 06:58
这个应该属于,网页代码,java脚本之类的?
作者: pcl_test 时间: 2016-3-17 08:26
div+css
作者: yu2n 时间: 2016-3-17 11:14
简单的页面,可以使用这种自适应设计。
复杂的页面,需要判断屏幕大小,分别设计。
作者: 522235677 时间: 2016-3-17 11:56
用js吧,可以的。但是自己先要定义一下多种分辨率
作者: ygqiang 时间: 2016-3-17 12:05
回复 6# 522235677
分辨率如果不是固定的呢?
显示器,预先并不知道具体多大尺寸/多高分辨率。
作者: ygqiang 时间: 2016-3-17 12:05
回复 5# yu2n
一般就是xp/win7系统环境下的平板/笔记本/台式机显示器。
屏幕的具体尺寸/分辨率,都不是固定的。
作者: ygqiang 时间: 2016-3-17 13:50
试了下。在一台显示器上调整好了
换到另一台不同尺寸/不同分辨率的显示器上,显示就不满足要求了。
作者: 522235677 时间: 2016-3-17 14:16
回复 7# ygqiang
所以让你自己定义啊,如果是1680*1050,窗口应该设成多大大小。如果是1366*762又设成多少
作者: ygqiang 时间: 2016-3-17 18:42
回复 10# 522235677
显示器分辨率有很多种。不是固定的啊。
作者: CrLf 时间: 2016-3-17 18:50
回复 11# ygqiang
所以他说用 JavaScript 啊
但是个人觉得这还是用 CSS 来实现比较好,见 5 楼链接
作者: ygqiang 时间: 2016-3-17 20:39
本帖最后由 ygqiang 于 2016-3-17 20:56 编辑
回复 12# CrLf
有人说:这个得用js脚本控制
js获取浏览器的宽高比例,
然后当达到某个比例的时候,就改变一下font-size字体大小
作者: CrLf 时间: 2016-3-17 21:18
回复 13# ygqiang
你到底有没有看 5 楼链接?他发的东西都已经写得那么清楚了
作者: ygqiang 时间: 2016-3-17 23:21
回复 14# CrLf
多谢。解决了。。
时间屏保.hta- <script language=vbscript>
- For Each Proc In GetObject("winmgmts:\\.\root\cimv2").ExecQuery("Select * from Win32_Process Where Name = 'mshta.exe'")
- if instr(Proc.commandline,location.pathname) then
- if proc.Priority>9 then '检查进程优先级是否为设置值10,是则为已运行的原进程
- if msgbox("程序已运行, 重新运行请按确认!", VbOK+vbInformation)<>1 then window.close() else Proc.Terminate
- else proc.SetPriority(32768)'64低 16384低于标准 32标准 32768高于标准 128高 256高(实时?)
- end if
- end if
- Next
- </script>
-
- <script language=vbscript>
- RecTimer=Window.setInterval("PausedSection(0)",500) // window.clearInterval(RecTimer)
-
- function PausedSection(rush)
- ON Error resume Next
- document.getElementById("curtime").innertext=Hour(Now)&":"&right("0"&Minute(Now),2)
- document.getElementById("cursec").innertext=right("0"&Second(Now),2)
- document.getElementById("curdate").innertext=Month(Now)&"-"&day(Now)
- document.getElementById("curweek").innertext="周"& mid("日一二三四五六",Weekday(Now),1)
- End function
- '''vertical-align:middle;line-height: 80px;
- </script>
- <script language="JavaScript" type="text/javascript">
- function changeFontSize() {
- var w = document.body.clientWidth
- var h = document.body.clientHeight
- var size = w/3;
- if (w > 2000) {
- size = w/3;
- } else {
- size = w/3;
- }
- document.getElementById("curtime").style.fontSize = ""+size+"px";
- var size2 = w/9;
- document.getElementById("cursec").style.fontSize = "" + size2 + "px";
- document.getElementById("curdate").style.fontSize = "" + size2 + "px";
- document.getElementById("curweek").style.fontSize = "" + size2 + "px";
- }
- setInterval( changeFontSize,100);
- </script>
-
- <body bgcolor=#000000 bordercolor=#000000 >
- <table style="width:100%; height:100%; text-align:center">
- <tr>
- <td>
- <strong><a id=curtime style="font-size:400px;color:#ffffff;font-family:黑体" /></strong>
- <strong><a id=cursec style="font-size:50px;color:#ffffff;margin-left: 8px;"/>
- <p></strong>
- <strong><a id=curdate style="font-size:50px;color:#ffffff;font-family:黑体;margin-left: 50px;" /></strong>
- <strong><a id=curweek style="font-size:50px;color:#ffffff;font-family:黑体;margin-left: 50px;" /></strong>
- </td>
- </tr>
- </table>
-
-
-
- <body scroll=no bgcolor=#000000 bordercolor=#000000 onclick=window.close() onkeyup=window.close()>
-
- <HTA:APPLICATION ID="screen"
- APPLICATIONNAME="myApp1"
- contextMenu ="no"
- BORDER="none"
- innerBorder="no"
- CAPTION="no"
- maximizebutton="yes"
- minimizebutton="yes"
- SHOWINTASKBAR="yes"
- SINGLEINSTANCE="yes"
- SYSMENU="no"
- VERSION="1.0"
- WINDOWSTATE="maximize"
- ICON="taskmgr.exe"
- />
复制代码
作者: yu2n 时间: 2016-3-17 23:27
回复 ygqiang
你到底有没有看 5 楼链接?他发的东西都已经写得那么清楚了
CrLf 发表于 2016-3-17 21:18
网上现成的例子也有,缩放网页字体:- www.jq22.com/demo/286f2b4a-484c-11e4-b680-00163e001348/
复制代码
作者: yu2n 时间: 2016-3-18 00:20
楼主的代码…
我有强迫症。- <HTA:APPLICATION ID="screen"
- APPLICATIONNAME="myApp1"
- contextMenu ="no"
- BORDER="none"
- innerBorder="no"
- SHOWINTASKBAR="yes"
- SINGLEINSTANCE="yes"
- SYSMENU="no"
- VERSION="1.0"
- WINDOWSTATE="maximize"
- ICON="taskmgr.exe"
- />
-
- <html lang="cn">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script language="JavaScript" type="text/javascript">
- function changeFontSize() {
- var w = document.body.clientWidth;
- var h = document.body.clientHeight;
- var size = w/3; size2 = w/9;
- if (w > 2000) {
- size = w/3;
- } else {
- size = w/3;
- }
- document.getElementById("curtime").style.fontSize = "" + size + "px";
- document.getElementById("cursec").style.fontSize = "" + size2 + "px";
- document.getElementById("curdate").style.fontSize = "" + size2 + "px";
- document.getElementById("curweek").style.fontSize = "" + size2 + "px";
- }
-
- function SetTimeText() {
- var dt1=new Date();
- document.getElementById("curtime").innerHTML = dt1.getHours() + ":" + ("00" + dt1.getMinutes()).slice(-2);
- document.getElementById("cursec").innerHTML = ("00" + dt1.getSeconds()).slice(-2);
- document.getElementById("curdate").innerHTML= dt1.getMonth() + "-" + dt1.getDate();
- document.getElementById("curweek").innerHTML = "周" + "日一二三四五六".substr(dt1.getDay(), 1);
- }
-
- window.onload = function(){
- SetTimeText();
- changeFontSize();
- setInterval(SetTimeText, 500);
- setInterval(changeFontSize, 1000);
- };
-
- function closeWindow() {
- try {
- var Shell = new ActiveXObject("Shell.Application");
- Shell = null;
- window.close();
- } catch(e) {}
- }
- </script>
- <style type="text/css">
- strong {display: inline}
- </style>
- </head>
- <body bgcolor="#000000" bordercolor="#000000" scroll="no" onclick="closeWindow()" onkeyup="closeWindow()">
- <table style="width:100%; height:100%; text-align:center">
- <tr>
- <td>
- <strong id=curtime style="font-size:400px;color:#ffffff;font-family:黑体" /></strong>
- <strong id=cursec style="font-size:50px;color:#ffffff;margin-left: 8px;"/></strong><br/>
- <strong id=curdate style="font-size:50px;color:#ffffff;font-family:黑体;margin-left: 50px;" /></strong>
- <strong id=curweek style="font-size:50px;color:#ffffff;font-family:黑体;margin-left: 50px;" /></strong>
- </td>
- </tr>
- </table>
- </body>
- </html>
复制代码
作者: ygqiang 时间: 2016-3-18 06:41
回复 17# yu2n
你这代码,星期不显示。。。只显示3个框框
作者: yu2n 时间: 2016-3-19 11:32
刚刚写的,试试吧。
Timer & Color
http://7i7hsj.com1.z0.glb.clouddn.com/ColorTimer.html
作者: ygqiang 时间: 2016-3-19 13:03
回复 19# yu2n
多谢。。
你这个有几个小问题。
1、IE提示有限制。每次都要用鼠标点击下:运行阻止的内容。才能继续运行。
2、颜色不够鲜艳。最好是黑色背景/白色数字
3、不能全屏显示。除了时间/日期/星期,其他按钮、按键啥的都不显示。
4、时间/日期/星期,字体大小。根据显示器大小/分辨率高低,自动缩小放大。- <script language=vbscript>
- For Each Proc In GetObject("winmgmts:\\.\root\cimv2").ExecQuery("Select * from Win32_Process Where Name = 'mshta.exe'")
- if instr(Proc.commandline,location.pathname) then
- if proc.Priority>9 then '检查进程优先级是否为设置值10,是则为已运行的原进程
- if msgbox("程序已运行, 重新运行请按确认!", VbOK+vbInformation)<>1 then window.close() else Proc.Terminate
- else proc.SetPriority(32768)'64低 16384低于标准 32标准 32768高于标准 128高 256高(实时?)
- end if
- end if
- Next
- </script>
-
- <script language=vbscript>
- RecTimer=Window.setInterval("PausedSection(0)",500) // window.clearInterval(RecTimer)
-
- function PausedSection(rush)
- ON Error resume Next
- changeFontSize
- document.getElementById("curtime").innertext=Hour(Now)&":"&right("0"&Minute(Now),2)
- document.getElementById("cursec").innertext=right("0"&Second(Now),2)
- document.getElementById("curdate").innertext=Month(Now)&"-"&day(Now)
- document.getElementById("curweek").innertext="周"& mid("日一二三四五六",Weekday(Now),1)
- End function
- </script>
- <script language="JavaScript" type="text/javascript">
- function changeFontSize() {
- var w = document.body.clientWidth /1.5
- //var h = document.body.clientHeight
- var size = w/1.8;
- if (w > 2000) {
- size = w/1.8;
- } else {
- size = w/1.8;
- }
- document.getElementById("curtime").style.fontSize = ""+size+"px";
- var size2 = w/9;var size3 = w/5;
- document.getElementById("cursec").style.fontSize = "" + size2 + "px";
- document.getElementById("curdate").style.fontSize = "" + size2 + "px";
- document.getElementById("curweek").style.fontSize = "" + size3 + "px";
- }
- //setInterval( changeFontSize,100);
- </script>
-
- <body bgcolor=#000000 bordercolor=#000000 >
- <table style="width:100%; height:100%; text-align:center">
- <tr>
- <td>
- <strong><a id=curtime style="font-size:800px;color:#ffffff;font-family:黑体" /><p></strong>
- <strong><a id=curdate style="font-size:100px;color:#ffffff;font-family:黑体;margin-left: 2px;" /></strong>
- <strong><a id=curweek style="font-size:100px;color:#ffffff;font-family:黑体;margin-left: 100px;" /></strong>
- </td>
- </tr>
- </table>
-
-
-
- <body scroll=no bgcolor=#000000 bordercolor=#000000 onclick=window.close() onkeyup=window.close()>
-
- <HTA:APPLICATION ID="screen"
- APPLICATIONNAME="myApp123"
- contextMenu ="no"
- BORDER="none"
- innerBorder="no"
- CAPTION="no"
- maximizebutton="yes"
- minimizebutton="yes"
- SHOWINTASKBAR="yes"
- SINGLEINSTANCE="yes"
- SYSMENU="no"
- VERSION="1.0"
- WINDOWSTATE="maximize"
- ICON="taskmgr.exe"
- />
复制代码
作者: yu2n 时间: 2016-3-19 15:14
回复 20# ygqiang
IE下面的 split() 有个BUG, 与chrome不一致:- console.log('rgb(1, 2, 3)'.split(/\D+/).join(', '));
复制代码
所以导致了出错。改用 match 方法就可以了。
试试:
http://7i7hsj.com1.z0.glb.clouddn.com/ColorTimer1.html
作者: CrLf 时间: 2016-3-19 15:54
回复 21# yu2n
什么版本的IE?IE9的运行结果是:日志: ,1,2,3,
作者: yu2n 时间: 2016-3-19 16:09
回复 22# CrLf
Windows 7 x64 IE8.0- >>console.log('rgb(1, 2, 3)'.split(/\D+/).join(', '));
- 日志: 1, 2, 3
复制代码
作者: ygqiang 时间: 2016-3-19 19:05
回复 21# yu2n
http://7i7hsj.com1.z0.glb.clouddn.com/ColorTimer1.html
你好。非常感谢。请教2个小问题。
1、win7 64系统,IE9 浏览器。这个网页源代码,保存成1.hta。为啥不显示:星期?
2、winxp系统,IE8浏览器。弹出错误提示窗口。- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTA:APPLICATION ID="screen"
- APPLICATIONNAME="myApp1"
- contextMenu ="no"
- BORDER="none"
- innerBorder="no"
- SHOWINTASKBAR="yes"
- SINGLEINSTANCE="yes"
- SYSMENU="no"
- VERSION="1.0"
- WINDOWSTATE="maximize"
- ICON="taskmgr.exe"
- />
- <html lang="cn">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Timer & Color</title>
- <script language="JavaScript" type="text/javascript">
- /**
- * HSL颜色值转换为RGB.
- * 换算公式改编自 http://en.wikipedia.org/wiki/HSL_color_space.
- * h, s, 和 l 设定在 [0, 1] 之间
- * 返回的 r, g, 和 b 在 [0, 255]之间
- *
- * @param Number h 色相
- * @param Number s 饱和度
- * @param Number l 亮度
- * @return Array RGB色值数值
- */
- function hslToRgb(h, s, l){
- var r, g, b;
-
- if(s == 0){
- r = g = b = l; // achromatic
- }else{
- var hue2rgb = function hue2rgb(p, q, t){
- if(t < 0) t += 1;
- if(t > 1) t -= 1;
- if(t < 1/6) return p + (q - p) * 6 * t;
- if(t < 1/2) return q;
- if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
- return p;
- }
-
- var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
- var p = 2 * l - q;
- r = hue2rgb(p, q, h + 1/3);
- g = hue2rgb(p, q, h);
- b = hue2rgb(p, q, h - 1/3);
- }
-
- return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
- }
-
-
- /**
- * RGB 颜色值转换为 HSL.
- * 转换公式参考自 http://en.wikipedia.org/wiki/HSL_color_space.
- * r, g, 和 b 需要在 [0, 255] 范围内
- * 返回的 h, s, 和 l 在 [0, 1] 之间
- *
- * @param Number r 红色色值
- * @param Number g 绿色色值
- * @param Number b 蓝色色值
- * @return Array HSL各值数组
- */
- function rgbToHsl(r, g, b){
- r /= 255, g /= 255, b /= 255;
- var max = Math.max(r, g, b), min = Math.min(r, g, b);
- var h, s, l = (max + min) / 2;
-
- if(max == min){
- h = s = 0; // achromatic
- }else{
- var d = max - min;
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
- switch(max){
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
- case g: h = (b - r) / d + 2; break;
- case b: h = (r - g) / d + 4; break;
- }
- h /= 6;
- }
-
- return [h, s, l];
- }
-
- //RGB转HEX
- function rgb2hex(rgb) {
- if (rgb.charAt(0) == '#') return rgb;
- function zero_fill_hex(num, digits) {
- var s = num.toString(16);
- while (s.length < digits) s = "0" + s;
- return s;
- };
- if (/rgb\(\d+, \d+, \d+\)/.test(rgb)) {
- var ds = rgb.match(/\d+/g);;
- var decimal = Number(ds[0]) * 65536 + Number(ds[1]) * 256 + Number(ds[2]);
- return "#" + zero_fill_hex(decimal, 6);
- };
- }
-
- //改变色调
- var HueSign = []; //色调符号
- function changColor(obj,uuid,type,step) {
- if (!HueSign[uuid]) HueSign[uuid] = 1;
- var rgb = obj.style[type];
- var hex = (rgb2hex(rgb)).substring(1);
- var r = parseInt("0x" + hex.substr(0,2));
- var g = parseInt("0x" + hex.substr(2,2));
- var b = parseInt("0x" + hex.substr(4,2));
- var hsl = rgbToHsl(r,g,b);
- var h = Math.round(hsl[0] * 2400)/10;
- var s = Math.round(hsl[1] * 2400)/10;
- var l = Math.round(hsl[2] * 2400)/10;
- h = h + HueSign[uuid] * step * 1; //修改色调
- if (h <= 0 || h >= 240) HueSign[uuid] = -1 * HueSign[uuid];
- if (h <= 0) h = 0;
- if (h >= 240) h = 240;
- var rgb = hslToRgb(h/240, s/240, l/240);
- hex = rgb2hex('rgb(' + rgb.join(', ') + ')');
- obj.style[type] = hex;
- return(true);
- }
- </script>
- <script language="JavaScript" type="text/javascript">
- //设置字体大小位置
- var LastSize = []; //记录最后的大小
- function changeFontSize() {
-
- var w = document.documentElement.clientWidth;
- var h = document.documentElement.clientHeight;
- if ((LastSize['Width'] != w) || (LastSize['Height'] != h)) {
- LastSize['Width'] = w;
- LastSize['Height'] = h;
-
- var size = w/100;
- document.getElementById("curtime").style.fontSize = "" + parseInt(size * 35) + "px";
- document.getElementById("cursec").style.fontSize = "" + parseInt(size * 10) + "px";
- document.getElementById("curdate").style.fontSize = "" + parseInt(size * 15) + "px";
- document.getElementById("curweek").style.fontSize = "" + parseInt(size * 15) + "px";
-
- var center = document.getElementById("center");
- center.style.left = (w - center.clientWidth)/2 + "px";
- center.style.top = (h - center.clientHeight)/2 + "px";
- }
- }
-
- //显示时间
- function SetTimeText() {
- var dt1=new Date();
- document.getElementById("curtime").innerHTML = dt1.getHours() + ":" + ("00" + dt1.getMinutes()).slice(-2);
- document.getElementById("cursec").innerHTML = ("00" + dt1.getSeconds()).slice(-2);
- document.getElementById("curdate").innerHTML= dt1.getMonth() + "-" + dt1.getDate();
- document.getElementById("curweek").innerHTML = "周" + "日一二三四五六".substr(dt1.getDay(), 1);
- }
-
- window.onload = function(){
-
- //关闭窗口(HTA)
- function closeWindow() {
- try {
- var Shell = new ActiveXObject("Shell.Application");
- Shell = null;
- window.close();
- } catch(e) {}
- }
- document.body.onclick = function(){ closeWindow(); };
- document.body.onkeyup = function(){ closeWindow(); };
-
- //显示时间
- SetTimeText();
- changeFontSize();
- setInterval(function(){
- SetTimeText();
- changeFontSize();
- }, 500);
-
- //修改颜色
- document.body.style['backgroundColor'] = '#336699';
- document.body.style['color'] = '#FFFFFF';
- setInterval(function(){
- //changColor(document.body, 'body::color', 'color', 1);
- changColor(document.body, 'body::backgroundColor', 'backgroundColor', 1);
- }, 50);
- };
-
-
- </script>
- <style type="text/css">
- #center {position: absolute; }
- #center strong {display: inline; padding: 2%; font-family:SimHei,"Microsoft YaHei","Microsoft JhengHei",DFKai-SB,SimSun;}
- </style>
- </head>
- <body scroll="no">
- <div id='center'>
- <strong id="curtime" /></strong><strong id="cursec" /></strong>
- <br/>
- <center><strong id="curdate" /></strong><strong id="curweek" /></strong></center>
- </div>
- </body>
- </html>
复制代码
作者: pcl_test 时间: 2016-3-19 21:44
回复 24# ygqiang
编码不对应
作者: ygqiang 时间: 2016-3-19 21:51
回复 25# pcl_test
能否帮忙修改下24楼的2个问题?谢谢了。
作者: yu2n 时间: 2016-3-19 23:15
回复 26# ygqiang
使用记事本打开源代码,依次点击菜单上“文件”-“另存为”,在“另存为”对话框中,编码选择“utf-8”,点“保存”。
作者: pcl_test 时间: 2016-3-19 23:21
回复 26# ygqiang
用英文吧
document.getElementById("curweek").innerHTML = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][dt1.getDay()];
作者: ygqiang 时间: 2016-3-19 23:30
回复 27# yu2n
多谢。。win7 64和xp系统下测试通过。
能否将秒,靠近左边的时间一点?谢谢。
作者: yu2n 时间: 2016-3-20 00:04
回复 29# ygqiang
替换CSS为:- <style type="text/css">
- #center {position: absolute; }
- #center span {display: inline; font-weight:bold; font-family:SimHei,"Microsoft YaHei","Microsoft JhengHei",DFKai-SB,SimSun;}
- #center span #curtime,#cursec {padding:1.5%;}
- #center span #curdate,#curweek {padding:2%;}
- </style>
复制代码
完整代码:
http://7i7hsj.com1.z0.glb.clouddn.com/ColorTimer2.html
作者: ygqiang 时间: 2016-3-20 06:43
本帖最后由 ygqiang 于 2016-3-20 06:47 编辑
回复 30# yu2n
搞定了。谢谢
欢迎光临 批处理之家 (http://www.bathome.net/) |
Powered by Discuz! 7.2 |