加载中…
个人资料
糖炒栗子
糖炒栗子
  • 博客等级:
  • 博客积分:0
  • 博客访问:32,496
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

网页中利用JS调用代码

(2009-12-07 11:51:12)
标签:

杂谈

分类: JS学习班

这是我利用JS调用实现的一些简单的效果。传上来可供大家查看。

这些JS代码全部应用在HTML页代码中。在<head>和</head>之间。

外部由一个单独的XX .JS文件。JS里的效果实现代码全部放在这里面。然后再在要引用的页面上加上下面的一些链接式代码即可。

 

1、浏览网页时,在页面上弹出信息。
1)<Script Language="JavaScript">
alert("这也是一个弹出对话框!");
</Script>

2)<Script Language="VBScript">
MsgBox "你输入有误,请重新输入!"
</Script>


2、打开窗口弹出对话框代码,放在body任何位置。
<SCRIPT LANGVAGE="JAVASCRIP">
<!--
   WINDOW-OPEN:'PAGE.HTML', 'new window', 'height= , width= ,top= left= tollbar=yes/no滚动栏是否显示, menubar=yes/no菜单栏,scrollbars=yes/no,
   resizable=yes/no改变窗口大小, location=yes/no显示地址栏,status=yes/no显示状态栏内的信息
//->
</SCRIPT>

 

 

3、我需要作这样一个连接,点击弹出一个新窗口。新窗口不能有滚动条、不能有状态栏、不能有工具栏!


height=100:窗口高度
width=100:窗口宽度
top=0:窗口距离屏幕上方的像素值
left=0:窗口距离屏幕左侧的像素值
toolbar=no:是否显示工具栏,yes为显示
menubar,xcrollbars:表示菜单栏和滚动条
status=no:是否显示状态栏内信息,yes为允许

 

【1、最基本的弹出窗口代码】   
  <SCRIPT LANGUAGE='javascript'>
  <!--
  window.open ('page.html')
  -->
  </SCRIPT>

 

4、用JS控制出现对话框的顺序;在头部里,标题下。
<script language="javascript">
var x;
x=prompt("我们认识吗,点击确定输入你的大名,看我们是否以前认识。","1");
document.write("不知道"+x+"<br>") // "+"用来连接多个字符串
document.write("我们可能以前在网上聊过天吧?不过我不能加你。因为我不知道你");
alert("欢迎下次光临!");
</script>

 

5、显示时间
<script language="javascript">
<!--
var now=new Date( );
var hour=now.getHours();
if (hour>=0 && hour <=12)
document.write("上午好");
if (hour>12 && hour <18)
document.write("下午好");
if (hour>18 && hour <24)
document.write("晚上好");

document.write("<p> 今 天 日 期 :"now.getYear()+"年"+(now.getMonth( )+1)+"月"+now.getDate()+"日");
document.write("<p> 现 在 时 间 :"now.getHours()+"点"+now.getMinutes( )+"分"+now.getSeconds( )+"秒");
// -->
</script>

 

6、正在运行的时间(只是显示出来,具体还要看调用的情况)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>正在运行的时钟</title>
<script language="JavaScript">
<!--
function disptime( )
{
var time = new Date( ); //获得当前时间
var hour = time.getHours( ); //获得小时、分钟、秒
var minute = time.getMinutes( );
var second = time.getSeconds( );
var apm="AM"; //默认显示上午: AM
if (hour>12) //按12小时制显示
{
hour=hour-12;
apm="PM" ;
}
if (minute < 10) //如果分钟只有1位,补0显示
minute="0"+minute;
if (second < 10) //如果秒数只有1位,补0显示

second="0"+second;

document.myform.myclock.value =hour+":"+minute+":"+second+" "+apm;

var myTime = setTimeout("disptime",1000);
}
//-->
</script>
<style type="text/css">
<!--

input{
font-size:50px;
color:#CC0000;
border-style:none;
}
-->
</style>
</head>
<body onLoad="disptime( )">
<form name="myform"><div align="center">
<input name="myclock" type="text" value="" size="15">
</div>
</form>
</body>
<html>


11、打开关闭窗口
<script> function openwindow()
{window.open("google.html"); //window可省略
}
function closewindow()
{window.close(); //window可省略
}
</script>
………………
<body>
<form>
<input type="button" value="打开窗口" onClick="openwindow()">
<input type="button" value="关闭窗口" onClick="closewindow()">
</form>
</body>

 

7、网页漂浮物
<html>
<head>
<script language="javascript">
function move( )
{
// getElementById( )方法根据ID名称获得层对象Layer1 解释:层的起点位置坐标随机改变。
document.getElementByIdx("Layer1").style.left=Math.random( )*500;    //产生 0~1的随机数
document.getElementByIdx("Layer1").style.top=Math.random()*500;
setTimeout("move()",800); //解释后最后一句:每隔800毫秒,循环调用move()函数,达到随机飘浮的效果
}
</script>
</head>
<body onLoad="move()"">
<div id="Layer1" style="position:absolute; left:14px; top:44px; width:150px; height:102px; z-index:1">
<a href="http://www.mycom.cn"><img src="piaofu.jpg" width="150" height="100">
</a>
</div>
<h2>随机漂浮的广告</h2>
</body>
<html>

 

8、变背景色(根据鼠标移动到不同的地方,想要背景色显示的颜色)
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>改变背景颜色</title>
<script language="javascript">
function change(color)
{
document.bgColor=color ; //改变页面的背景色
}
</script>
</head>
<body>
<h2>移过来我变色给你看看!</h2>
<font size="4">
<span onMouseOver="change('red')">变红色</span>
<span onMouseover="change('blue')">变蓝色</span>
<span onMouseover="change('yellow')">变黄色</span>
</font>
</body>

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有