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 ...
随机推荐
- 使用SSH命令行远程登录运行在CloudFoundry上的应用
当我试图用如下命令行采用SSH远程登录到运行在CloudFoundry环境下的应用时, cf ssh -N -T -L 9229:127.0.0.1:9229 jerry-demo-server 遇到 ...
- Google C++单元测试框架GoogleTest---AdvancedGuide（译文）
上篇在这里: 下篇在这里.
- 前端基础(一)：HTML内容
HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5 ...
- python函数大全
1.range函数 可创建一个整数列表,用于for循环中 格式为:range(start,stop[,step]) start:计数从start开始,默认从0开始 stop:计数从stop结束,但不包 ...
- centos wireshark
root安装: yum install wireshark yum install wireshark-gnome wireshark error: There are no interfaces o ...
- Raid0、Raid0+1、Raid1、Raid5四者的区别
RAID,可以把硬盘整合成一个大磁盘,还可以在大磁盘上再分区,放数据还有一个大功能,多块盘放在一起可以有冗余(备份)RAID整合方式有很多,常用的:0 1 5 10 Raid0Raid0是所有raid ...
- BZOJ3331 [BeiJing2013]压力[圆方树+树上差分]
圆方树新技能get.具体笔记见图连通性问题学习笔记. 这题求无向图的必经点,这个是一个固定套路:首先,一张连通的无向图中,每对点双和点双之间是以一个且仅一个割点连接起来的(如果超过一个就不能是割点了) ...
- P2709 小B的询问——普通莫队&&模板
普通莫队概念 莫队:莫涛队长发明的算法,尊称莫队.其实就是优化的暴力. 普通莫队只兹磁询问不支持修改,是离线的. 莫队的基本思想:就是假定我得到了一个询问区间[l,r]的答案,那么我可以在极短(通常是 ...
- spring boot 入门 使用spring.profiles.active来分区配置(转)
很多时候,我们项目在开发环境和生成环境的环境配置是不一样的,例如,数据库配置,在开发的时候,我们一般用测试数据库,而在生产环境的时候,我们是用正式的数据,这时候,我们可以利用profile在不同的环境 ...
- 【Android-GridView控件】 九宫格
效果图: 1.主界面布局 activity_main.xml GridView的三种属性: android:numColumns="" 每一行显示多少列 android:horiz ...