JavaScript案例学习1

来源：互联网发布：链式编程编辑：程序博客网时间：2024/06/04 23:28

原文链接：http://baiyuming.top/2016/06/07/JavaScript%E5%AD%A6%E4%B9%A01/

JavaScript 案例1

鼠标方上显示提示信息，鼠标移开提示信息消失

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>初探JavaScript</title>    <style>        #div1{            background: red;            width: 200px;            height: 20px;            display: none;        }    </style></head><body><input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'"    onmouseout="document.getElementById('div1').style.display='none'"/><div id="div1">    为了您的信息安全。。。。</div></body></html>

其中：
1、js 主要是给网页添加交互
2、事件用户的操作
onclick 、 onmouseover 、 onmouseout
3、设置样式
onmouseover=”document.getElementById(‘div1’).style.display=’block’”
4、getElementById 根据id 获取元素

JavaScript 案例2

鼠标放上div 变大，颜色改变

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>初探JavaScript</title>    <style>        #div1{            background: red;            width: 200px;            height: 200px;        }    </style></head><body><div id="div1" onmouseover="toGreen()"></div><script>    function toGreen() {        var oDiv = document.getElementById('div1');        oDiv.style.width='300px';        oDiv.style.height = '300px';        oDiv.style.background = 'green';    }</script></body></html>

其中应用了函数的概念

JavaScript 案例3

点击按钮更换网页皮肤

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>初探JavaScript</title>    <link id="link" rel="stylesheet" href="css1.css"></head><body><input type="button" value="Skin1" onclick="changeSkin1()"><input type="button" value="Skin2" onclick="changeSkin2()"><script>    function changeSkin1() {        var oLink = document.getElementById('link');        oLink.href = 'css1.css';    }    function changeSkin2() {        var oLink = document.getElementById('link');        oLink.href = 'css2.css';    }</script></body></html>

0 0

JavaScript案例学习1

原文链接：http://baiyuming.top/2016/06/07/JavaScript%E5%AD%A6%E4%B9%A01/

JavaScript 案例1

鼠标方上显示提示信息，鼠标移开提示信息消失

JavaScript 案例2

鼠标放上div 变大 ， 颜色改变

JavaScript 案例3

点击按钮 更换网页皮肤

鼠标放上div 变大，颜色改变

点击按钮更换网页皮肤