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

js基础1应用案例

2017-02-28 09:54 405 查看

1. 变量的作用域

根据变量的作用范围   可以分为全局变量和局部变量

全局变量：

    1. 在最外层声明的变量。

    2. 在函数体内部，但是没有声明var的变量也是全局变量

局部变量：

     在函数体内部的声明的变量

2. 事件

怎么触发的这个事情按

一般情况下这个是动词点击鼠标经过按键盘

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

应用案例-鼠标移入更换图片

<body>
<img src="images/jd1.png" id="pic">
</body>

<script type="text/javascript">
window.onload = function(){
var pic = document.getElementById("pic");
pic.onmouseover = function(){
pic.src = "images/jd2.png";
}
pic.onmouseout = function(){
pic.src = "images/jd1.png";
}
}
</script>

应用案例-关闭广告banner-使用隐藏display：none

<div class="topbanner" id="top_banner">
<div class="w tp">
<img src="images/topbanner.jpg" alt=""/>
<a href="javascript:;" class="close-banner" id="jd_close"></a>
</div>
</div>

<script>
/*事件源： a
事件  点击
事件处理程序   topbanner 这个隐藏的意思*/
/*要做事，先找人*/
var jd_close = document.getElementById("jd_close"); // 得到a
var topBanner = document.getElementById("top_banner"); // 得到大的
//事件源.事件 = function(){}
jd_close.onclick = function(){
topBanner.style.display = "none";
}
</script>

3. 隐藏样式

Display: none 隐藏           display: block; 显示的意思

Visibility: hidden; 隐藏       visibility: visible 显示的意思

Display：none 隐藏不占位置实际使用多，例如京东原版

Visibility:hidden 隐藏占有位置  停职留心

Overflow:hidden;   隐藏超出的部分。

4. 应用案例-更换背景图片

<body id="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>

<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");
var body = document.getElementById("body");
pic1.onclick = function(){
body.style.backgroundImage = "url(images/1.jpg)";
}
pic2.onclick = function(){
body.style.backgroundImage = "url(images/2.jpg)";
}
pic3.onclick = function(){
body.style.backgroundImage = "url(images/3.jpg)";
}
}
</script>

5. padding

内边距会影响盒子大小

行内元素尽量不用上下的padding和margin

继承的宽度 padding不会挤开。

6. js位置：行内式、内嵌式、外链式

7. 数据类型

Js 的数据类型分为：字符型     数值型  布尔型   null   undefined

a. 字符型

String

转换为字符型:

1. 利用“” (双引号)

   加了引号的都是字符型。

2. 利用String(); 转换为字符型

b. 布尔型

数据类型转换为布尔型：

1. 利用 !!

console.log(typeof !!num);

2. 利用 Boolean()

false、undefined 、null、0、”” 为 false

true、1、”somestring”、[Object] 为 true

c. 数值型

Var num = 10

数值的前面带 0 表示八进制

Var num = 020;

0*80+2*81 = 16

数值的前面带 0x 表示十六进制

var result = 0xb;   11

转换为数值型:

1. 利用 - * / 都可以转换

2 利用Number( )

d. parseInt() parseFloat() 面试题！！

parseInt(值,进制);

NOT anumber

MMD

BBD

parseInt(110,2)

表示2进制        把110 这个2进制转换为 10进制

0*20+1*21 + 1*22   = 6

8 . 模态框重点应用案例 css案例记住！！！ JavaScript案例记住！！！！！

<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 x
var close_all = document.getElementById("close_all");
close_all.onclick = function(){
mask.style.display = 'none';
box.style.display = "none";
}
}
</script>

<body>
<!--京东的头部导航开始-->
<div class="mask" id="mask"></div>
<div class="box" id="box">
<span id="close_all">×</span>
</div>
<div class="shortcut">

.mask{
width:100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
display: none;
}
.box{
width: 400px;
height: 250px;
background-color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin: -125px 0 0 -200px;
z-index: 1000;
display: none;
}
.box span{
position: absolute;
width: 15px;
height: 15px;
font-size: 15px;
cursor: pointer;
top: 15px;
right: 15px;
}

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

标签：

相关文章推荐

新的分享

章节导航