JS 篇（1）

来源：互联网发布：php富文本编辑器编辑：程序博客网时间：2024/04/30 14:45

百度换图

（点击图片，更换背景)

    <!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title></title>    <style>    *{    margin:0;    padding:0;    }    body {    background: url(images/1.jpg) top center;    }    .box {    height: 150px;    background: rgba(255,255,255,.3);    text-align: center;    padding-top: 50px;    }    /*滑过图片出现小手*/    .box img {    cursor: pointer;    }    </style>    <script>    window.onload = function(){    var pic1 =document.getElementById("pic1");    var pic2 =document.getElementById("pic2");    var pic3 =document.getElementById("pic3");    pic1.onclick = function(){    document.body.style.backgroundImage = "url(images/1.jpg)"    }    pic2.onclick = function(){    document.body.style.backgroundImage = "url(images/2.jpg)"    }    pic3.onclick = function(){    document.body.style.backgroundImage = "url(images/3.jpg)"    }    }    </script>    </head>    <body>    <div class="box">    <img src="images/1.jpg" alt="" width="150" id="pic1">    <img src="images/2.jpg" alt="" width="150" id="pic2">    <img src="images/3.jpg" alt="" width="150" id="pic3">    </div>    </body>    </html>

登录界面

这里写图片描述

html

    <script type="text/javascript">    window.onload = function(){    var login = document.getElementById("login");    var mask = document.getElementById("mask");    var box = document.getElementById("box");    login.onclick = function(){    mask.style.display="block";    box.style.display="block";    }    //事件源 span  ×    var close = document.getElementById("close_all");    close_all.onclick = function(){    //单引号双引号没有区别    mask.style.display = 'none';    box.style.display = "none";    }    }    </script>    </head>    <body>    <!--style放到mask里-->    <!--弹出登录框-->    <div id="mask"></div>    <div id="box" >    <span id="close_all">×</span>    </div>

css

/*弹出登录框*/#mask {    width: 100%;    height: 100%;    background: rgba(0,0,0,.5);    position: fixed;    top:0;    left: 0;    z-index: 999;    display: none;}#box {    width: 400px;    height: 250px;    background-color: #fff;    position: fixed;    top: 50%;    left: 50%;    margin:-125px 0 0 -200px;    z-index: 1000;    display: none;}#box span {    position: absolute;    top: 10px;    right: 10px;    width: 15px;    height: 15px;    font-size: 15px;}/*弹出登录框结束*/

1.内边距会影响盒子大小
2.行内元素尽量不用上下的margin和padding
继承的宽给padding不会撑开盒子（宽度会继承，高度不会继承）

3.行内式可以直接在button里面写，如下：

    <div style="color:red;">123</div>    <button onclick="alert('你好吗')">点击我</button>

一般情况下单双引号是一样的，但是出线了包裹情况，我们一般采取的是外双内单或外单内双的格式

    <a href=" javascript:;"></a>    <a href=" javascript:void(0);"></a>

轮播图的三角，小的12345或者tab栏可以切换的js特效

*内嵌式：*

    <script type="text/javascript">  </script>

（可以放到页面中的任何地方）

外链式(单独写一个文件）：

    <script src="xx.js" type="text/javascript"></script>

这对标记之间不能写任何东西

window.onload = function(){}一个文件里面只能写一次，因为只能有一个入口函数

行内式和内嵌式的综合

    <button onclick="fun();">点击我</button>    <script>    function fun(){    alert(12121212);    }    </script>

4.js的数据类型分为：字符型，数值型，布尔型，null ,undefined
js是一种弱数据类型，js 的变量你给什么值他就是什么数据类型。
5.var a=b=c=9;等同于 var a=9; b=9; c=9;其中，a是局部变量，b和c 是全局变量。
var a=10，b=20;等同于 var a=10;var b=20;
6.数字+undefined=Nan
7.arguments是用来存储实参的
8.变量不能加引号，加引号就当字符来看了
9.overflow:hidden详解：
　overflow:hidden除了隐藏溢出，还有清除浮动这个含义。提到清除浮动，我们会想到clear:both，但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。

    #a{     width:100px;     height:100px;    background:pink;     }     #b{     float:left;     width:200px;     height:200px;    background:red;    }

鼠标经过更换图片

    <!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title></title>    <style>    *{margin:0;padding:0;}    ul {list-style:none;}    #box {    height: 70px;    width: 360px;    padding-top: 360px;    border: 1px solid #ccc;    margin: 100px auto;    overflow: hidden;    background: url(images/01big.jpg) no-repeat;    }    #box ul {    /*孩子浮动了，要清除浮动，要不然没有高*/    overflow: hidden;    border-top:1px solid #ccc;    }    #box li{    float: left;    }    </style>    <script>    // 相同部分：鼠标经过，背景更换图片，可以放到一个函数里，重复使用即可    // 事件源  li  事件  鼠标经过   事件处理程序  box 更换背景    var li02 = document.getElementById("li02");    var box = document.getElementById("box");    li02.onmouseover = function(){    box.style.backgroundImage = "url(images/02big.jpg)";    }    </head>    <body>    <div id="box">    <ul>    <li><img src="images/01.jpg" alt=""></li>    <li><img src="images/02.jpg" alt=""></li>    <li><img src="images/03.jpg" alt=""></li>    <li><img src="images/04.jpg" alt=""></li>    <li><img src="images/05.jpg" alt=""></li>    </ul>    </div>    </body>    </html>

补充：overflow:hidden这个属性的作用是隐藏溢出，给a加上这个属性后，b 的宽高自动的被隐藏掉了。另外，我们将a这个div的高度值删除后，我们发现，a的高度被b 这个div的高度值给撑开了。我们原先的理解是，在一个平面上的浮动，但是通过尝试，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动。也就是说，当b这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了a这个div，也就是说，此时的b 的宽高是多少，对于已经脱离了的a来说，都是不起作用的。当我们给a这个div加上overflow:hidden这个属性的时候，其中的b等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给a这个div设置高度的时候，b 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给a这个div加上一个高度值，那么无论b 这个div的高度是多少，a这个高度都是我们设定的值。而当b 的高度超过a的高度的时候，超出的部分就会被隐藏。

上面代码只是li02的变换，写满5张图的变化极为繁琐，下面我们采用js来优化代码

    <script>    window.onload = function(){    function fn(liid,bg) {  //封装函数 参数的传递    var obj = document.getElementById(liid);//会变化的一定通过变量更改    var box = document.getElementById("box");    obj.onmouseover = function(){    box.style.backgroundImage = bg;    }    }    fn("li02","url(images/02big.jpg)");    }    </script>

$id函数

    <!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title></title>    <style>    div {    width: 100px;    height: 100px;    background-color: pink;    }    </style>    </head>    <body>    <div id="demo"></div>    <div id="text"></div>    <script>    function $(id){    return document.getElementById(id);    }    $("demo").style.backgroundColor = 'purple';    </script>    </body>    </html>

查询中奖

    <!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title></title>    <script>    window.onload = function(){    function $(id){return document.getElementById(id);}    $("btn").onclick = function(){    if($("txt").value == "啊啊啊")    alert("中奖");    else    alert("失败");    }    }    </script>    </head>    <body>    <input type="text" id="txt" value="请输入"><button id="btn">点击</button>    </body>    </html>

0 0