扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
#lid{
成都创新互联公司是一家以成都网站建设公司、网页设计、品牌设计、软件运维、seo优化排名、小程序App开发等移动开发为一体互联网公司。已累计为成都纱窗等众行业中小客户提供优质的互联网建站和软件开发服务。
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
color: white;
z-index: -1;
display: none;
}
#top{
background: white;
width: 500px;
height: 200px;
margin: 100px auto;
border-radius: 10px;
display: none;
html
div正常显示文字位置/div
button显示遮罩层/button
div id="lid"/div
div id="top"这是遮罩层显示文字位置/div
js
oBtn = document.querySelector('button');
oLid = document.getElementById('lid');
oTop = document.getElementById('top');
oBtn.onclick = function(){
oLid.style.display = 'block';
oTop.style.display = 'block';
}
本文实例讲解了javascript实现动态显示当前系统时间的详细代码，具体内容如下
（1）时间日期信息，应该在一个div中来显示
（2）定时器：每隔一秒再次访问系统时间，window对象的setTimeout()
（3）时钟显示的时机(事件)：当网页加载完成后才显示，事件onload
（4）如何将
时间日期信息
写入到指定的div中，DOM对象中的innerHTML属性
效果图：
具体代码：
html
head
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/
title无标题文档/title
script
type="text/javascript"
//定义函数：构建要显示的时间日期字符串
function
showTime()
{
//创建Date对象
var
today
=
new
Date();
//分别取出年、月、日、时、分、秒
var
year
=
today.getFullYear();
var
month
=
today.getMonth()+1;
var
day
=
today.getDate();
var
hours
=
today.getHours();
var
minutes
=
today.getMinutes();
var
seconds
=
today.getSeconds();
//如果是单个数，则前面补0
month
=
month10
?
"0"+month
:
month;
day
=
day
10
?
"0"+day
:
day;
hours
=
hours10
?
"0"+hours
:
hours;
minutes
=
minutes10
?
"0"+minutes
:
minutes;
seconds
=
seconds10
?
"0"+seconds
:
seconds;
//构建要输出的字符串
var
str
=
year+"年"+month+"月"+day+"日
"+hours+":"+minutes+":"+seconds;
//获取id=result的对象
var
obj
=
document.getElementById("result");
//将str的内容写入到id=result的div中去
obj.innerHTML
=
str;
//延时器
window.setTimeout("showTime()",1000);
}
/script
style
type="text/css"
#result{
width:500px;
border:1px
solid
#CCCCCC;
background:#FFFFCC;
margin:50px
auto;
font-size:24px;
color:#FF0000;
padding:20px;
}
/style
/head
body
onload="showTime()"
div
id="result"/div
/body
/html
希望本文所述对大家的javascript程序设计有所帮助。
废话不多说了，直接给大家贴js实现点击图片显示原图片的代码，具体代码如下所示：
function
DrawImage(ImgD){
var
image
=
new
Image();
image.src=ImgD.src;
var
width
=
$(ImgD).attr("width");
var
height
=
$(ImgD).attr("height");
if(width
100
height80){
ImgD.width=100;
ImgD.height=80;
ImgD.alt=image.width+"×"+image.height;
}else{
if(image.width0
image.height0){
flag=true;
if(image.width300
||
image.height200){
ImgD.width=image.width/2;
ImgD.height=image.height/2;
ImgD.alt=image.width+"×"+image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
ImgD.alt=image.width+"×"+image.height;
}
}
}
}
下面分享一段关于js实现上传图片及时预览
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title图片上传本地预览/title
style
type="text/css"
#preview{width:260px;height:190px;border:1px
solid
#000;overflow:hidden;}
#imghead
{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
/style
script
type="text/javascript"
//图片上传预览
IE是用了滤镜。
function
previewImage(file)
{
var
MAXWIDTH
=
260;
var
MAXHEIGHT
=
180;
var
div
=
document.getElementById('preview');
if
(file.files
file.files[0])
{
div.innerHTML
='img
id=imghead';
var
img
=
document.getElementById('imghead');
img.onload
=
function(){
var
rect
=
clacImgZoomParam(MAXWIDTH,
MAXHEIGHT,
img.offsetWidth,
img.offsetHeight);
img.width
=
rect.width;
img.height
=
rect.height;
//
img.style.marginLeft
=
rect.left+'px';
img.style.marginTop
=
rect.top+'px';
}
var
reader
=
new
FileReader();
reader.onload
=
function(evt){img.src
=
evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else
//兼容IE
{
var
sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var
src
=
document.selection.createRange().text;
div.innerHTML
=
'img
id=imghead';
var
img
=
document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src
=
src;
var
rect
=
clacImgZoomParam(MAXWIDTH,
MAXHEIGHT,
img.offsetWidth,
img.offsetHeight);
status
=('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML
=
"div
id=divhead
style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'/div";
}
}
function
clacImgZoomParam(
maxWidth,
maxHeight,
width,
height
){
var
param
=
{top:0,
left:0,
width:width,
height:height};
if(
widthmaxWidth
||
heightmaxHeight
)
{
rateWidth
=
width
/
maxWidth;
rateHeight
=
height
/
maxHeight;
if(
rateWidth
rateHeight
)
{
param.width
=
maxWidth;
param.height
=
Math.round(height
/
rateWidth);
}else
{
param.width
=
Math.round(width
/
rateHeight);
param.height
=
maxHeight;
}
}
param.left
=
Math.round((maxWidth
-
param.width)
/
2);
param.top
=
Math.round((maxHeight
-
param.height)
/
2);
return
param;
}
/script
/head
body
div
id="preview"
img
id="imghead"
width=100
height=100
border=0
src='%=request.getContextPath()%/images/defaul.jpg'
/div
input
type="file"
onchange="previewImage(this)"
/
/body
/html
JavaScript 是属于网络的脚本语言，ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。
希望对你有帮助，望采纳！
刷新：
//对于ie，谷歌，360：
//页面加载时只执行onload
//页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。
//页面关闭时，先onbeforeunload事件，再onunload事件。
//对于火狐：
//页面刷新时，只执行onunload；页面关闭时，只执行onbeforeunload事件
刷新的时候先onbeforeunload，然后取服务端请求数据，在新页面即将替换旧页面时onunload事件，而页面关闭时，先onbeforeunload事件，再立即onunload事件。那么在刷新的时候，onbeforeunload与onunload之间的时间肯定比关闭的时候时间长，经过测试确实如此。
关闭：
使用onunload或onbeforeunload可以监听浏览器关闭事件，但是无法区分关闭与刷新。以下js代码可以部分监听关闭浏览器的事件！
//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置
var n = window.event.screenX - window.screenLeft;
//鼠标在当前窗口内时，nm，b为false；鼠标在当前窗口外时，nm，b为true。20这个值是指关闭按钮的宽度
var b = n document.documentElement.scrollWidth-20;
//鼠标在客户区内时，window.event.clientY0；鼠标在客户区外时，window.event.clientY0
if(b window.event.clientY 0 || window.event.altKey || window.event.ctrlKey){
关闭浏览器时你想做的事
}else if(event.clientY document.body.clientHeight || event.altKey){
关闭浏览器时你想做的事
}
这段js能监听到鼠标点击浏览器关闭按钮、浏览器状态栏鼠标右键弹出菜单中的关闭以及各种快捷键。但是双击浏览器坐上角图标关闭浏览器和关闭标签页无法监听。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网