网页中利用JS调用代码

  • A+
所属分类:好文分享

这些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.zhangjianqun.com><img src="piaofu.jpg" alt="网页中利用JS调用代码"
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>

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: