基于javascript,基于精益创业思想可将创业分为

基于JavaScript如何制作遮罩层对话框

#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实现动态显示当前系统时间

本文实例讲解了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程序设计有所帮助。

基于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基于什么标准

JavaScript 是属于网络的脚本语言，ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

希望对你有帮助，望采纳！

基于JavaScript判断浏览器到底是关闭还是刷

刷新：

//对于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能监听到鼠标点击浏览器关闭按钮、浏览器状态栏鼠标右键弹出菜单中的关闭以及各种快捷键。但是双击浏览器坐上角图标关闭浏览器和关闭标签页无法监听。