js系列（9）js的运用（一）

时间：2016-08-14 20:38:43 阅读：180 评论：0 收藏：0 [点我收藏+]

标签：

本节开始介绍javascript在html页面中的运用。

(1)link样式表的动态绑定:(http://files.cnblogs.com/files/MenAngel/text04.zip)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>示例9.1</title>
    <link id="olink" href="css/01.css" rel="stylesheet" />
    <script>
        function tored() {
            var alink = document.getElementById(‘olink‘);
            alink.href = ‘css/01.css‘;
        }
        function toblue() {
            var alink = document.getElementById(‘olink‘);
            alink.href = ‘css/02.css‘;
        }
    </script>
</head>
<body>
    <input type="button" value="red" onclick="tored()"/>
    <input type="button" value="blue" onclick="toblue()" />
    <div></div>
</body>
</html>

技术分享

(2)js中参数的传递

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>示例9.2</title>
    <style>
        #div1 {
           width:200px;
           height:200px;
           background-color:red;
        }
    </style>
    <script>
        function tobianshe(yanshe) {
            var odiv = document.getElementById(‘div1‘);       
            odiv.style.backgroundColor = yanshe;
        }/*
        function toblue() {
          var odiv = document.getElementById(‘div1‘);
          odiv.style.backgroundColor = ‘blue‘;
        }
        function toyellow() {
            var odiv = document.getElementById(‘div1‘);
            odiv.style.backgroundColor = ‘yellow‘;
        }
        function togreen() {
            var odiv = document.getElementById(‘div1‘);
            odiv.style.backgroundColor = ‘green‘;
        }*/
    </script>
</head>
<body>
    <input type="button"  value="变蓝"  onclick="tobianshe(‘blue‘)"/>
    <input type="button"  value="变黄"  onclick="tobianshe(‘yellow‘)"/>
    <input type="button"  value="变绿"  onclick="tobianshe(‘green‘)"/>
    <div id="div1">
    </div>
</body>
</html>

技术分享

(3)显示和隐藏元素:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>示例9.3</title>
<style>
   #div1{
     width:200px; 
     height:200px;
     background:#CCC;
     display:none;
   }
</style>
<script>
function showHide()
{
    var oDiv = document.getElementById(‘div1‘);
    if (oDiv.style.display == ‘block‘) {
        oDiv.style.display = ‘none‘;
    }
    else{
        oDiv.style.display = ‘block‘;
    }    
}
</script>
</head>

<body>
<input type="button" value="显示隐藏" onclick="showHide()" />
<div id="div1" >
</div>
</body>
</html>

技术分享

(4)js中选取成组元素:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>示例9.4</title>
    <script>
    <!--在页面运行时自调用，如果设置事件，需要给函数加上函数名-->
        window.onload=function(){
        var aDiv = document.getElementsByTagName(‘div‘);
        var cDiv = document.getElementsByClassName(‘a‘);
        alert("元素的个数为:"+cDiv.length);
        }
    </script>
</head>
<body>
    <div></div>
    <div class="a"></div>
    <div></div>
    <div></div>
    <div class="a"></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="a"></div>
    <div></div>
    <div></div>
</body>
</html>

技术分享

(5)js中的定时器:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>示例9.5</title>
    <script>
        window.onload = function (){
        var obtn1 = document.getElementById(‘btn1‘);
        var obtn2 = document.getElementById(‘btn2‘);
        var timer = null;
          obtn1.onclick = function () {
            <!--setInterval的返回值是一个timer类型-->
            timer= setInterval(function () { alert(‘基友节‘);},5000);//每5秒执行一次
          }
          obtn2.onclick = function () {
            clearInterval(timer);
          }
        }
    </script>
</head>
<body>
    <input type="button" value="开启" id="btn1"/>
    <input type="button" value="关闭" id="btn2"/>
</body>
</html>

技术分享

js系列（9）js的运用（一）

标签：

原文地址：http://www.cnblogs.com/MenAngel/p/5770919.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行