javascript实例学习一
javascript实例学习
在当前网页中使用其他网页
<object type="text/x-scriptlet" width="500" height="500" data="http://www.baidu.com"></object>
也可以用frame
<body><iframe onload=alert("加载完毕") src='http://www.sina.com.cn'></iframe></body>
在页面中动态添加脚本
<script>
o=document.createElement("script"); //动态创建script元素
o.text="alert('test!')"; //输出语句。。是脚本中的代码
document.documentElement.childNodes[0].appendChild(o);//将脚本添加到页面中
</script>
使用javascript传递页面参数
<a href="1.25 使用JavaScript传递页面参数.htm?name=张三&age=24">转到第二页，注意参数</a>
刷新页面
<script type=text/javascript>
function renovates(){
document.location.reload();
}
</script>
</head>
<body onLoad="alert('页面刷新了！');">
<input type="button" name="renovates" value="刷新" onClick="renovates()"/>
</body>
按回车调用登陆按钮
也可以扩展为按下某一按键触发某个动作
<script language="JavaScript">
function keyLogin(){
if (event.keyCode==13) //回车键的键值为13
document.getElementById("input1").click(); //调用登录按钮的登录事件
}
</script>
<body onkeydown="keyLogin();">
<input id="input1" value="登录" type="button" onClick="alert('调用成功！')">
</body>
获得控件的绝对位置
function getAddress(e)
{
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop; //获取X坐标
l+=e.offsetLeft; //获取Y坐标
}
alert("x坐标="+t+" y坐标为="+l);
}
<input id="Button1" type="button" value="坐标" onClick="getAddress(this)" />//传入this作为参数
图片式按钮+下拉框的使用
<body>
<script language=JavaScript>
function goTo()
{
var myindex=document.myform.mailBox.selectedIndex //获取下拉框中的选择索引
location=document.myform.mailBox.options[myindex].value;//获取下拉框的选择值
}
</script>
<form name="myform">
<br />
<select name="mailBox" size=1>
<option selected>选项</option>
<option value="http://www.163.net">163电子邮局</option>
<option value="http://www.263.net">263电子邮局</option>
</select><br />
<a href="javascript: goTo()"> //参数是通过location这个值来传递的，难道这就是传说中的闭包？
<img src="按钮1.gif"/></a>
</form>
</body>
选择不同的列表项显示不同的按钮
涉及到下拉列表的设置，按钮的生成
<HEAD>
<title>测试列表选择项 </title>
<script>
function butSelect(){
var selVal = document.getElementById("sel").value;
if(selVal == "1"){
document.getElementById("td").innerHTML = '<input type="button" value="按钮1" onclick="btnc1();">';
}else if(selVal == "2"){
document.getElementById("td").innerHTML = '<input type="button" value="按钮2" onclick="btnc2();">';
}else{
document.getElementById("td").innerHTML = '';
}
}
function btnc1(){
alert("单击了按钮1");
}
function btnc2(){
alert("单击了按钮2");
}
</script>
</HEAD>
<BODY>
<table>
<tr>
<td>
<select onChange="butSelect();" id="sel">
<option value="1">but1
<option value="2">but2
</select>
</td>
<td id="td"></td>
</tr>
</table>
<script language="javascript">
var sel=document.getElementById('sel');
sel.selectedIndex=-1;
</script>
</BODY>
动态创建按钮：
在DOM的结构中创建一个元素并作为子节点添加
<script language="javascript">
var i=0 ;
function addInput()
{
var o = document.createElement("input"); //使用DOM的创建元素方法
o.type = "button" ; //设置元素的类型
o.value = "按钮" + i++ ; //设置元素的值
o.attachEvent("onclick",addInput); //为控件添加事件
document.body.appendChild(o); //添加控件到窗体中
o = null; //释放对象
}
</script>
为元素动态添加事件
<script language=javascript>
function addClick(obj)//添加事件的参数，参数为控件的标识
{
obj.onclick=function() //绑定按钮的单击事件
{
alert('动态添加事件成功 ');//单击事件完成的功能－输出提示
}
}
</script>
</head>
<body>
<input id="Button2" type="button" value=" 测试" />
<br /><input id="Button1" type="button" value="为上面的按钮添加事件" onClick="addClick(Button2)" />
</body>
