JS初探
如何实现点击后，有下拉菜单的效果呢？
写一个JS效果的步骤：
一、先实现布局
二、实现原理
三、了解JS语法
1、JS获取效果元素
2、知道是什么事件（鼠标事件、键盘事件、表单事件、系统事件、自定义事件。。。。）
3、将要发生的时间添加到元素上
元素.事件
4、明确事件添加后干什么------函数：可以理解为一些命令
function name(){ //还是一个命令，肯定不会主动去执行的
任何想要做的事情
}
5、去执行
1）直接调用：name();
2）事件调用：元素.事件=函数名name；//切记：函数名后面不要括号
匿名函数的调用：
元素.事件=function（）{ }
3）......
要学会测试：
1.alert（‘内容’）;当引号、双引号都行
2.console.log()的使用
热身运动：实现动态改变宽高、背景色
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrap{
padding: 10px;
}
#click_btn{
background-color: red;
width: 100px;
height: 30px;
color: #fff;
}
#box{
width: 100px;
height: 100px;
border: 2px solid black;
}
#mark{
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.content{
width: 350px;
height: 300px;
border: 20px solid #ffa;
background-color: #fff;
margin:150px auto;
text-align: center;
}
.s_div{
padding: 20px;
}
.s_div input[type="button"]{
width: 40px;
height: 30px;
margin-right: 10px;
cursor: pointer; }
#reset,#sure{
width: 80px;
height: 50px;
background-color: blue;
color: white;
margin: 20px auto;
font-size: 16px;
display: inline-block;
margin-right:2px;
line-height: 50px;
cursor: pointer;
}
.color{
color: white;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="wrap">
<h3>请点击后设置：<input type="button" value="点击设置" id="click_btn"></h3>
<div id="box"></div>
<div id="mark">
<div class="content">
<div class="s_div" id="s_div">
<p title="color">请选择背景色：<input type="button" value="红" class="color red" title="red"><input type="button" value="黄" class="color yellow" title="yellow"><input type="button" value="蓝" class="color blue" title="blue"></p>
<p title="width">请选择宽[px]：<input type="button" value="200" title="200"><input type="button" value="300" title="300"><input type="button" value="400" title="400"></p>
<p title="height">请选择高[px]：<input type="button" value="200" title="200"><input type="button" value="300" title="300"><input type="button" value="400" title="400"></p>
<p><a type="button" id="reset">重置</a><a type="button" id="sure">确定</a></p>
</div>
</div>
</div>
</div>
</body>
<script>
function $(id) {
return document.getElementById(id);//其中的$只是一个函数名称，换成任何其他的都可以.这个就是个方法, 方法名字叫$ 参数为id. 这个是元素id.
//传入这个id, 会拿到相应的html代码元素里相应的id的对象.
}
$('click_btn').onclick=function(){
$('mark').style.display='block'
}
$('reset').onclick=function(){
$('box').style.cssText="width:100px;height:100px;background-color:white;"
}
window.onload=function(){
var oInput=$('s_div').getElementsByTagName('input');
$('sure').onclick=function(){
$('mark').style.display='none';
}
for(var i=0;i<oInput.length;i++){
oInput[i].onclick=function(){
var parenNode=this.parentNode.title;//父节点
var title=isNaN(this.title)?this.title:this.title+'px';//判断是颜色还是数值，是颜色就传原值，是数值就加一个px
switch(parenNode){
case 'color':$('box').style.background=title;
case 'width':$('box').style.width=title;
case 'height':$('box').style.height=title;
}
}
} }
</script>
</html>
JS初探的更多相关文章
- Node.js初探之GET方式传输
Node.js初探之GET方式传输 例子:form用GET方法向后台传东西 html文件: <form action="http://localhost:8080/aaa" ...
- Node.js 初探
概念 Node.js 是构建在Chrome javascript runtime之上的平台,能够很容易的构建快速的,可伸缩性的网络应用程序.Node.js使用事件驱动,非阻塞I/O 模式,这使它能够更 ...
- vue.js初探
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...
- Node.js系列之node.js初探
官方介绍:Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable n ...
- [转]backbone.js 初探
本文转自:http://weakfi.iteye.com/blog/1391990 什么是backbone backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架. 主要提供了 ...
- angular.js初探
2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这 ...
- Parallel.js初探续集
@author mrbean 例子均来源于github parallel.js 昨天写的第一篇今天一看居然有50+的阅读量了,感觉很激动啊,但是也有点害怕毕竟这只是自己笔记性质的一点东西,所以赶紧拿起 ...
- Parallel.js初探
今天闲着看了一下Parallel.js.这个库暂时貌似还没有什么中文的介绍(可能暂时用的人都不多吧).所以就只能上github找它得源码和介绍看看了.貌似它的代码也不多,以后可以深入研究一下. 先简单 ...
- Underscore.js 初探
一. 简介 Underscore 这个单词的意思是“下划线”. Underscore.js 是一个 JavaScript 工具库,提供了一整套的辅助方法供你使用. Think that - ...
- Node.js初探之hello world
昨天公司内部培训,主讲人王老板对Node.js评价很高,连用几个“变态”来形容,恰好今天周末,有时间来认识下Node.js,对一门新语言最好的认识,是让其输出“hello world”,今天我就利用N ...
随机推荐
- STM32工程模版
STM32工程模版,看过来 ST库源码去官方下载 创建工程目录 doc:存放说明文档 lib:存放库文件 listing:存放编译产生的中间文件 output:存放生成的文件 project:存放工程 ...
- shell脚本——数组
连续的变量 解决:变量过多的问题,在同一类变量中,不需要定义多个名字,而是以数组的方式来定义 定义数组: declare -I 定义整数 declare -a 定义数组 declare -A 定义嵌套 ...
- cbv装饰器 中间件 跨站请求伪造
给cbv下面的函数加装饰器 写一个验证用户登录的程序 前端页面 # 写一个装饰器验证session def login_auth(func): def inner(request,*args,**kw ...
- 部署ELK
1.搭建客户机Nginx ls[root@nginx ~]# hostname nginx [root@nginx ~]# cat /etc/redhat-release CentOS release ...
- esxi克隆虚拟机
1.->选中虚拟机->导出(需要关闭虚拟机电源) 此时会下载下两个文件: 2.新建虚拟机 ->从OVF或OVA文件部署虚拟机 然后创建虚拟机,选择第二项 然后填入新虚拟机名称,并把下 ...
- Java实现一行一行读取文件内容（进行编码处理）
// 读取文件内容public String readFile(){ String path = ""; File file = new File(path); StringBui ...
- Python3-def
def hello(): print("这是一个无参数的方法!") hello(); print("") def helloOne(str): print(st ...
- SDL 小例子
以下利用SDL播放网络流,需要自己配置运行环境,包括SDL和FFmpeg // ConsoleApplication2.cpp : 定义控制台应用程序的入口点. // /* #include &quo ...
- MFC 类内线程函数
线程函数必须是全局函数或静态成员函数. 非静态成员函数都有一个隐含的参数用于接收所属类的this指针,一般情况下调用时参数不匹配.所以static可以干掉隐含的参数. 但是没有了this,类内的函数就 ...
- Huffman树、霍夫曼编码
Huffman树指的是带权路径长度WPL最小的二叉树 WPL=路径*权值 Huffman常用于压缩编码,正常传输ABCDEF这些字母需要3位二进制树来描述,但由于一篇文章中ABCDEF这些字母出现的概 ...