您的位置：首页 > Web前端 > JavaScript

JavaScript DOM

2016-05-25 17:55 483 查看

DOM

实例：

1、点击页面‘+1’按钮后，使页面上显示的数字加1

<body>
<div>
<div id="num">1</div>
<input type="button" value="+1" onclick="add();"/> <!--点击button后，执行onclick后面的函数-->
</div>
<script type="text/javascript">
function add(){     //定义add()函数
var nid = document.getElementById('num'); //获取id为num
var text = nid.innerText; //获取标签的文本值
text = parseInt(text);  //字符串转换成整型
text +=1;
nid.innerText=text;  //更改num的值
}
</script>
</body>

innerTEXT与innerHTML：

innerTEXT获取的是两个标签之间的纯text文本，不包含这其中的html标签

innerHTML获取的是两个标签之间的所有的内容，包括text和html标签

对于用户输入或选择的值，获取其中的值时使用value。

2、获取input 输入值

<div>
<input type="text" id="in1"/>
<input type="button" value="getvalue" onclick="getvalue();"/>
</div>

<script type="text/javascript">
function getvalue(){
var obj = document.getElementById('in1');
alert(obj.value);
}
</script>

3、搜索框实例

<div>
<input type="text" id="in2" value="input your search:" onfocus="Focus();" onblur="Blur();"/>
</div>

<script type="text/javascript">
function Focus(){
var nid = document.getElementById('in2');
var value = nid.value;
if(value == 'input your search:'){
nid.value = '';
}
}
function Blur(){
var nid = document.getElementById('in2');
var value = nid.value;
if(value.trim()== ''){         //.trim()去空格
nid.value = 'input your search:'
}
}

</script>

4、JS提交表单

<div>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<div onclick="Submit();">提交</div>
</form>
</div>

<script type="text/javascript">
function Submit(){
document.getElementById('form1').submit();
}
</script>

加入判断，表格内容为空时，禁止提交

<body>
<form action="http://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<input type="submit" onclick=" return sub();" value="submit"/>
</form>
<script>
function sub(){
var q = document.getElementsByName('query')[0];
if(q.value.trim()){
return true;
}else {
alert('wrong');
return false;
}
}
</script>
</body

5、跑马灯计时器:setInterval()

<script>
setInterval('run()',1000);  //定时器，每1000毫秒执行一次run()函数
function run(){
var text = document.title; //获取title值，html中只有一个title，可以直接获取
var FisrtChar = text.charAt(0); //获取title值的第一个字符
var subText = texbText + FisrtChar;//拼接成新的title
document.title = newTitle;//赋值
}
</script>

停止定时器 clearInterval()

<body>
<input type="submit" value="STOP" onclick="stopinterval();"/>
<script>

obj = setInterval('run()',1000);  //定时器，每1000毫秒执行一次run()函数
function run(){
var text = document.title; //获取title值，html中只有一个title，可以直接获取
var FisrtChar = text.charAt(0); //获取title值的第一个字符
var subText = text.substring(1,text.length);//获取title值第二个到最后的字符
var newTitle = subText + FisrtChar;//拼接成新的title
document.title = newTitle;//赋值
}

function stopinterval(){
clearInterval(obj);
}

</script>

只执行一次定时器

setTimeout('run()',1000);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航