JavaScript第一课鼠标覆盖和移出

最新推荐文章于 2025-01-06 19:07:01 发布

草帽hhh

最新推荐文章于 2025-01-06 19:07:01 发布

阅读量1.4k

点赞数

第一个Java效果文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript效果</title>
<style>
    #div1{width:200px; height:100px; background:#ccc; border:1px solid
    #999; display:none}
</style>
</head>
<body>
<input type="checkbox"/>
<div id="div1">
    为了您的信息安全。。。
</div>
</body>
</html>

按钮文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>

</head>
<body>
<input type="button" value="按钮" onclick="alert('点。。。点点不得呀');"/>
</body>
</html>

鼠标覆盖时间和鼠标移出事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript效果</title>
<style>
    #div1{width:200px; height:100px; background:#ccc; border:1px solid
    #999; display:none}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';"/>
<div id="div1">
    为了您的信息安全。。。
</div>
</body>
</html>

缺陷，兼容性，firefox不兼容，不能直接用id，要用getElementById才能用，意思是“通过id获取元素”

<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="div1.style.display='none';"/>

扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
    <style>
    #div01 {width:200px; height:200px; background:red;}
    </style>
</head>
<body>
<div id="div01" onmouseover=
        "document.getElementById('div01').style.width='300px';
        document.getElementById('div01').style.height='300px';
        document.getElementById('div01').style.background='green';" onmouseout=
        "document.getElementById('div01').style.width='200px';
         document.getElementById('div01').style.height='200px';
         document.getElementById('div01').style.background='yellow';">
</div>
</body>
</html>

函数写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
    <style>
    #div01 {width:200px; height:200px; background:red;}
    </style>
<script>
    function toGreen()
    {
        document.getElementById('div01').style.width='300px';
        document.getElementById('div01').style.height='300px';
        document.getElementById('div01').style.background='green';
    }
    function toYellow()
    {
        document.getElementById('div01').style.width='200px';
        document.getElementById('div01').style.height='200px';
        document.getElementById('div01').style.background='yellow';
    }
</script>
</head>
<body>
<div id="div01" onmouseover="toGreen()" onmouseout="toYellow()">

</div>
</body>
</html>

重用写法--变量

<script>
    function toGreen()
    {
        var oDiv=document.getElementById('div01');
       oDiv.style.width='300px';
       oDiv.style.height='300px';
       oDiv.style.background='green';
    }
    function toRed()
    {
        var oDiv=document.getElementById('div01');
      oDiv.style.width='200px';
      oDiv.style.height='200px';
      oDiv.style.background='red'
    }
</script>

函数格式

function 函数名()

{

代码

}

函数的定义和调用

function show()
   {
        alert('abc');
   }
show()

css文件一

@charset "utf-8";

body {background:black;}
input {width:200px; height:100px; background:yellow}

css文件二

@charset "utf-8";

body {background:#ccc;}
input {width:200px; height:100px; background:red}

django框架css加载问题 Resource interpreted as Stylesheet but transferred with MIME type application/x-css:

css文件加载不成功

解决方案:http://blog.youkuaiyun.com/xiaoquantouer/article/details/52063397（环境原因）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css效果</title>
    <link  id="link1" rel="stylesheet" type="text/css" href="css1.css" />
    <script>
        function skin1()
        {
            var ol=document.getElementById('link1');
            ol.href='css1.css';
        }
        function skin2()
        {
            var ol=document.getElementById('link1');
            ol.href='css2.css';
        }
    </script>
</head>
<body>
<input type="button" value="皮肤1" onclick="skin1()" />
<input type="button" value="皮肤2" onclick="skin2()" />

</body>

任何标签都可以加id，包括link

任何标签的任何属性都可以修改

html里面怎么写js里面就怎么写

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    function setText()
    {
        var oTxt=document.getElementById('txt1');
        oTxt.value='weda';
    }
</script>
    </head>
<body>
<input id="txt1"  type="text" />
<input type="button" value="改文字"  onclick="setText()" />

函数 setText（）中就写value，因为html中是这样写的，<input type=“ ” value=" " >

if判断

if（条件）

{

语句1

}

else

{

语句2

}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
#div1 {width:100px; height:200px; background:#ccc; display:block;}
</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里面怎么写js里面就怎么写

，除了class，因为class是保留的关键字

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {width:100px; height:100px; border:1px solid black;}
        .box {background:red;}
    </style>
    <script>
        function toRed()
        {
            var oDiv=document.getElementById('div1')
            oDiv.className='box';
        }
    </script>
</head>
<body>
<input type="button" value="变红" onclick="toRed()">
<div id="div1">
    </div>

<a href> 和JavaScript

<div id="div1">
    </div>
<a href="javascript:alert(‘告诉浏览器这不是一个网址，别跳过去，而是一段JavaScript，要执行')">链接</a>
</body>