为了账号安全，请及时绑定邮箱和手机立即绑定
课程 \ JavaScript进阶篇

JavaScript进阶篇

代码 109 问答 2
按时间 按章节
9-6 setAttribute()方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text=Lists[i].getAttribute("title");
document.write(text +"<br>");
if(text=="null")
{
Lists[i].setAttribute("title","web前段技术");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
</html>
2016-11-18 查看完整代码
9-5 getAttribute()方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text=con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
</html>
2016-11-18 查看完整代码
9-4 区别getElementByID,getElementsByName,getElementsByTagName
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");

// 任务1
for(var i=0;i<hobby.length;i++){
if(hobby[i].name=="hobby"){
hobby[i].checked=true;
}
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");

// 任务2
for(var i=0;i<hobby.length;i++){
hobby[i].checked=false;

}

}

function checkone(){
var j=document.getElementById("wb").value;

var hobby=document.getElementsByName("hobby");
// 任务3
for(var i=0;i<6;i++){
{
if(j==i+1)

hobby[i].checked=true;
}
}
}


</script>
</body>
</html>
2016-11-18 查看完整代码
9-3 getElementsByTagName()方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
</head>
<body>

<form name="Input">
<table align="center" width="500px" height="50%" border="1">
<tr>
<td align="center" width="100px">
学号:
</td>
<td align="center" width="300px">
<input type="text" id=userid name="user" onblur="validate();">
<div id=usermsg></div>
</td>
</tr>
<tr>
<td align="center" width="100px">
姓名:
</td>
<td align="center">
<input type="text" name="name">
</td>
</tr>
<tr>
<td align="center" width="%45">
性别:
</td>
<td align="center">
<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女
</td>
</tr>
<tr>
<td align="center" width="30%">
年龄:
</td>
<td align="center" width="300px">
<input type="text" name="age">
</td>
</tr>
<tr>
<td align="center" width="100px">
地址:
</td>
<td align="center" width="300px">
<input type="text" name="addr">
</td>
</tr>

</table>
</form>
<h1 id="myHead" onclick="getValue()">
看看三种获取节点的方法?
</h1>
<p>
点击标题弹出它的值。
</p>
<input type="button" onclick="getElements()"
value="看看name为sex的节点有几个?" />
<Br>
<input type="button" onclick="getTagElements()"
value="看看标签名为input的节点有几个?" />

<script type="text/javascript">
function getValue()
{
var myH= document.getElementById("myHead");
alert(myH.innerHTML);
}
function getElements()
{
var myS=document.getElementsByName("sex");
alert(myS.length);
}

function getTagElements()
{
var myI=document.getElementsByTagName("input");
alert(myI.length);
}

</script>

</body>
</html>
2016-11-18 查看完整代码
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>
2016-11-18 查看完整代码
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 newStyle=document.getElementById("con");
newStyle.style.color="red";
newStyle.style.backgroundColor="blue";

newStyle.style.display=none;

</script>
</body>
</html>
2016-11-17 查看完整代码
8-17 编程练习
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先编写好网页布局-->
<h1>操作成功</h1>
<p><strong id="second">5</strong>秒后回到主页<a href="back()">返回</a></p>

<script type="text/javascript">

//获取显示秒数的元素，通过定时器来更改秒数。
var num=5;
function daojishi()
{
document.getElementById("second").innerHTML=num;
num=num-1;
if(num==0)
{
window.location.assign("http://mm.vmall.com/cw6x.html");
}
}
var int=setInterval(daojishi,1000);
//通过window的location和history对象来控制网页的跳转。
function back()
{
window.history.back();
}
</script>

</body>
</html>
2016-11-17 查看完整代码
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(window.location.host);

</script>
</head>
<body>
</body>
</html>
2016-11-17 查看完整代码
8-14 screen对象
2016-11-17 查看完整代码
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 Brower()
{
var userName=navigator.userAgent;
var b_name="Failed to identify the browser";
if(userName.indexOf("Firefox")>-1)
{
b_name="Firefox";
}else if(userName.indexOf("Chrome")>-1)
{
b_name="Chrome";
}else if(userName.indexOf("MSIE")>-1&&userName.indexOf("Trident")>-1)
{
b_name="IE8";
}

document.write("浏览器："+b_name+"<br>");
document.write("浏览器："+userName+"<br>");
}

</script>
</head>
<body>
<form>
<input type="button" value="l" onclick="Brower()">
</form>
</body>
</html>
2016-11-17 查看完整代码
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">
var browser=navigator.appCodeName;
var b_version=navigator.userAgent;
document.write("browser name:"+browser+"<br>");
document.write("browser version:"+b_version);

</script>
<body>
</body>
</html>
2016-11-17 查看完整代码
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(-2);
}

function GoForward() {
window.history.go(3);
}
</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>
2016-11-17 查看完整代码
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 goback()
{
window.history.back();
}
function forward()
{
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>
<form><input type="button" value="返回前一个页面" onclick="goback()"/><input type="button" value="返回下一个页面" onclick="forward()" /></form>
</form>
</body>
</html>
2016-11-17 查看完整代码
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>
<form>
<a href="#">第一个秒点</a>
<br/>
<a href="#">第二个秒点</a>
<br/>
使用下面的按钮，实现返回前一个页面：
<br/>
<input type="button" value="返回前一个页面" onclick="goback()">
</form>

</body>
</html>
2016-11-17 查看完整代码
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|back();
document.write(HL);
</script>
<body>
</body>
</html>
2016-11-17 查看完整代码
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;
function startCount()
{
document.getElementById('tex').value=num;
num=num+1;
var i=setTimeout("startCount()",1000);
}
function stopCount()
{
clearTimeout(i);
}

</script>
</head>
<body>
<form>
<input type="text" id="tex" size="50">
<input type="button" value="start" onclick="startCount()">
<input type="button" value="stop" onclick="stopCount()">
</form>
</body>
</html>
2016-11-16 查看完整代码
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 numcount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numcount()",1000);
}


</script>
</head>
<body>
<form>
<input type="text" id="txt" size="50">
<input type="button" value="start" onclick="numcount()">
</form>
</body>
</html>
2016-11-16 查看完整代码
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 int=setInterval(clock,1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(int)" />
</form>
</body>
</html>
2016-11-16 查看完整代码
8-3 计时器setInterval()
<!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();
var attime=time.getHours()+"时"+time.getMinutes()+"分"+time.getSeconds()+"秒";
document.getElementById("clock").value=attime;
}
setInterval(clock,1000);
//size=50是文本框的长度
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"/>
</form>
</body>
</html>
2016-11-16 查看完整代码
7-5 返回/设置时间方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期对象 </title>
<script type="text/javascript">
var mydate=new Date();
document.write("当前时间："+mydate+"<br>");
mydate.setTime(mydate.getTime() + 2* 60 * 60 * 1000);
document.write("推迟二小时时间：" + mydate);
</script>
</head>
<body>
</body>
</html>
2016-11-16 查看完整代码
首页上一页123456下一页尾页
意见反馈 帮助中心 APP下载
官方微信