加载中…
标签：
杂谈 |
分类： 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">
<!--
//->
</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;
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
赠金笔