课程 \
JavaScript进阶篇
9-2 getElementsByName()方法
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
var mynode=document.getElementsByName("myt") ;
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>
2015-04-26
查看完整代码
9-1 认识DOM
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#ccc";
mychar.style.display="none";
</script>
</body>
</html>
2015-04-26
查看完整代码
8-17 编程练习
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<!--先编写好网页布局-->
<h1>操作成功</h1>
<span id="seconds">5</span>秒后回到主页
<a href="javascript:back();">返回</a>
<script type="text/javascript">
//获取显示秒数的元素，通过定时器来更改秒数。
var num=document.getElementById("seconds").innerHTML;
function change()
{
num--;
document.getElementById("seconds").innerHTML=num;
if (num==0) {
clearInterval(i);
location.href="http://www.baidu.com/";
};
}
var i=setInterval(change,1000);
//通过window的location和history对象来控制网页的跳转。
function back()
{
window.history.back();
}
</script>
</body>
</html>
2015-04-26
查看完整代码
8-16 屏幕可用高和宽度
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth+"<br>" );
document.write("可用高度："+screen.availHeight );
</script>
</body>
</html>
2015-04-26
查看完整代码
8-15 屏幕分辨率的高和宽
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write( "屏幕宽度："+screen.width+"<br>");
document.write( "屏幕高度："+screen.height+"<br>");
</script>
</body>
</html>
2015-04-26
查看完整代码
8-13 userAgent
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
function validB(){
var u_agent =navigator.userAgent ;
var B_name="不是想用的主流浏览器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("浏览器:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
</script>
</head>
<body>
<form>
<input type="button" value="查看浏览器" onclick="validB()" >
</form>
</body>
</html>
2015-04-26
查看完整代码
8-12 Navigator对象
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
document.write(navigator.appCodeName+"<br>");
document.write(navigator.appName+"<br>");
document.write(navigator.appVersion+"<br>");
document.write(navigator.platform+"<br>");
document.write(navigator.userAgent+"<br>");
</script>
<body>
</body>
</html>
2015-04-26
查看完整代码
8-11 Location对象
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
<script type="text/javascript">
document.write(location.href);
</script>
</head>
<body>
</body>
</html>
2015-04-26
查看完整代码
8-10 返回浏览历史中的其他页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
window.history.go(-1);
}
function GoForward() {
window.history.go(1);
}
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回前或下一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
<input type="button" value="返回下一个页面" onclick="GoForward();" />
</form>
</body>
</html>
2015-04-26
查看完整代码
8-9 返回下一个浏览的页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoForward() {
window.history.forward();
}
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回下一个页面:
<form>
<input type="button" value="返回下一个页面" onclick="GoForward()" />
</form>
</body>
</html>
2015-04-26
查看完整代码
8-8 返回前一个浏览的页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
window.history.back();
}
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回前一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
</form>
</body>
</html>
2015-04-26
查看完整代码
8-7 History 对象
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History对象</title>
</head>
<script type="text/javascript">
var HL =window.history.length ;
document.write(HL);
</script>
<body>
</body>
</html>
2015-04-26
查看完整代码
8-6 取消计时器clearTimeout()
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick="startCount()"/>
<input type="button" value="Stop" onclick="stopCount()" />
</form>
</body>
</html>
2015-04-26
查看完整代码
8-5 计时器setTimeout()
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",1000);
}
setTimeout("startCount()",1000);
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>
2015-04-26
查看完整代码
8-4 取消计时器clearInterval()
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
var i=setInterval("clock()",1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)"/>
</form>
</body>
</html>
2015-04-26
查看完整代码
8-3 计时器setInterval()
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var attime;
function clock(){
var time=new Date();
attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() ;
document.getElementById("clock").value = attime;
}
setInterval(clock;1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>
2015-04-25
查看完整代码
8-1 window对象
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>window对象</title>
<script type="text/javascript">
alert("欢迎来到慕课网");
function opennew(){
window.open('http://www.imooc.com','width=600,height=400')
}
</script>
</head>
<body>
<form>
<input type="button" value="点击我，打开新窗口" onClick="opennew()" />
</form>
</body>
</html>
2015-04-25
查看完整代码
7-23 编程练习
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>
<script type="text/javascript">
//通过javascript的日期对象来得到当前的日期，并输出。
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var sum=0;
for(i=3;i<scoreStr.length;i+=6)
{
sum+=parseInt(scoreStr.substr(i,2));
}
var average=Math.floor(sum/(i/7+1));
//从数组中将成绩撮出来，然后求和取整，并输出。
document.write(mydate.getFullYear()+"年"+(mydate.getMonth()+1)+"月"+mydate.getDate()+"日 "+weekday[mydate.getDay()]+"--班级总分为:"+average);
</script>
</head>
<body>
</body>
</html>
2015-04-25
查看完整代码
首页上一页123456下一页尾页