JS(七)
JS又上完了,还是感觉JS技巧性很强,需要多积累经验...看了一下PHP的内容,感觉搭建环境好麻烦,结果回来下了个wamp感觉好像就可以了.....
1.红绿蓝颜色条:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页背景颜色控制2</title>
<script type="text/javascript">
window.onload = function(){
//找对象
var inputsObj = document.getElementsByTagName("input");
//加时间
for(var i=0;i<inputsObj.length;i++){
inputsObj[i].onchange = function(){
//找对象
var red = document.getElementById("red").value;
var green = document.getElementById("green").value;
var blue = document.getElementById("blue").value;
//输出颜色
document.body.style.backgroundColor="rgb("+red+","+green+","+blue+")";
//找到span标记并写入内容
var spanObj = document.getElementsByTagName("span");
for(var j=0;j<spanObj.length;j++){
spanObj[j].innerHTML = inputsObj[j].value;
}
}
}
}
</script>
</head>
<body>
红：<input type="range" min="0" max="255" id="red" value="255"><span id="res_red">255</span><br>
绿：<input type="range" min="0" max="255" id="green" value="255"><span id="res_green">255</span><br>
蓝：<input type="range" min="0" max="255" id="blue" value="255"><span id="res_blue">255</span><br>
</body>
</html>
2.选项卡切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡切换</title>
<style type="text/css">
body,ul,li{margin: 0px;padding: 0px;}
ul li{list-style: none;}
.box{
width:298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.title{
height: 27px;
position: relative;
}
.title ul{
position:absolute;
width: 301px;
left:-1px;
}
.title ul li{
height: 26px;
line-height: 26px;
float: left;
width: 58px;
text-align: center;
overflow: hidden;
background: #fff;
border-bottom: 1px solid #eee;
padding:0px 1px;
background: #f7f7f7;
}
.title ul li.select{
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding:0px;
font-weight: bold;
}
.content .cont{margin: 10px 10px 10px 20px;}
.content .cont ul li{
float: left;
width: 133px;
height: 25px;
line-height: 25px;
overflow: hidden;
}
a:link,a:visited{text-decoration: none;color: #000;}
a:hover{color:#f90;}
</style>
<script type="text/javascript">
window.onload = function(){
var div_titleObj = document.getElementById("title");
var lisObj = div_titleObj.getElementsByTagName("li");
var div_contentObj = document.getElementById("content");
var divsObj = div_contentObj.getElementsByTagName("div");
for(var i=0; i<lisObj.length; i++){
lisObj[i].id = i;
lisObj[i].onclick = function(){
for(var j=0; j<divsObj.length; j++){
divsObj[j].style.display = "none";
lisObj[j].className = "";
}
divsObj[this.id].style.display = "block";
lisObj[this.id].className = "select";
}
} }
</script>
</head>
<body>
<div class="box" id="box">
<div class="title" id="title">
<ul>
<li class="select"><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li ><a href="#">公益</a></li>
</ul>
</div>
<div class="content" id="content">
<div class="cont" style="display: block;">
<ul>
<li><a href="#">阿里云总裁胡晓明</a></li>
<li><a href="#">云计算将成为新经济爆发点</a></li>
<li><a href="#">天猫超市发放10亿红包</a></li>
<li><a href="#">高圆圆跑步公开课上线</a></li>
</ul>
</div>
<div class="cont" style="display: none;">
<ul>
<li><a href="#">2016春节发货调整公告</a></li>
<li><a href="#">广告法禁用语大全</a></li>
<li><a href="#">邮费争议问题汇总</a></li>
<li><a href="#">炒信规则调整意见反馈</a></li>
</ul>
</div>
<div class="cont" style="display: none;">
<ul>
<li><a href="#">趣解2016电商四大趋势</a></li>
<li><a href="#">全职妈妈两年两皇冠</a></li>
<li><a href="#">创业社区招募管理员</a></li>
<li><a href="#">滥发信息体检工具上线</a></li>
</ul>
</div>
<div class="cont" style="display: none;">
<ul>
<li><a href="#">拉你进Q群微信刷单？</a></li>
<li><a href="#">推荐店铺安全管理利器</a></li>
<li><a href="#">谨防炒信”黑吃黑“</a></li>
<li><a href="#">警方铲除炒信诈骗团伙</a></li>
</ul>
</div>
<div class="cont" style="display: none;">
<ul>
<li><a href="#">公益宝贝获中华慈善奖</a></li>
<li><a href="#">公益发展指数阿里五星</a></li>
<li><a href="#">公益宝贝卖家发票索取</a></li>
<li><a href="#">公益机构淘宝开店攻略</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS(七)的更多相关文章
- JS七种加密解密方法
http://www.cnblogs.com/mq0036/p/4983858.html HTML或JS加密解密 本文一共介绍了七种方法: 一:最简单的加密解密 二:转义字符"\&q ...
- node.js(七) 子进程 child_process模块
众所周知node.js是基于单线程模型架构,这样的设计可以带来高效的CPU利用率,但是无法却利用多个核心的CPU,为了解决这个问题,node.js提供了child_process模块,通过多进程来实现 ...
- Ionic Js七：手势事件
1.on-hold 长按的时间是500毫秒. HTML 代码 <button on-hold="onHold()" class="button">长 ...
- 通用JS七
instanceof 在原型链上寻找这个属性的定义 match 正则匹配字符串 Symbol() Symbol()函数不能用作构造函数,与new关键字一起使用.这样做是为了避免创建符号包装对象,像使用 ...
- 利用nginx concat模块合并js css
前言: nginx-http-concat模块是由淘宝网开发的,现在淘宝网合并js和css正是用这个模块,如链接http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min. ...
- Node.js+Koa开发微信公众号个人笔记（一）准备工作
本人也是在学习过程中,所以文章只作为学习笔记,如果能帮到你,那就更好啦~当然也难免会有错误,请不吝指出~ 一.准备工作 1.本人学习教程:慕课网Scott老师的<Node.js七天搞定微信公众号 ...
- javascript framework js常用框架
js常用框架 一.node.js 二.angularjs.js 三.react.js 四.webpack.js 五.flux.js 六.vue.js 七.bootstrap ...
- Js中常见的内存泄漏场景
常见的内存泄漏场景 内存泄漏Memory Leak是指程序中已动态分配的堆内存由于疏忽或错误等原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果.内存泄漏并非指内 ...
- 初识NodeJS
1.JavaScript 模块化规范 浏览器环境 AMD Asynchronous Module Definition RequireJS CMD Common Module Definition S ...
随机推荐
- udp协议基础（转自疯狂java讲义）
第17章 网络编程 17.4 基于UDP协议的网络编程 UDP协议是一种不可靠的网络协议,它在通信实例的两端各建立一个Socket,但这两个Socket之间并没有虚拟链路,这两个Socket只是发 ...
- 配置本地yum源的方法
配置本地yum源的方法 1. 挂载光驱 如果是上传iso镜像到服务器上,则直接挂载iso镜像即可: #mount -o loop -t iso9660 /xxxx.iso /挂载目录 开机自动加载#v ...
- 【解决】WordPress FTP连接服务器时出错，请检查设置，WordPress需要访问您网页服务器的权限
刚装好wordpress,发现后台预装了两个插件,想删掉,结果要登录FTP,死活登不上去,提示"连接服务器时出错,请检查设置,WordPress需要访问您网页服务器的权限",网上也 ...
- Java-20个非常有用的程序片段
下面是20个非常有用的Java程序片段,希望能对你有用. 1.字符串有整型的相互转换 String a = String.valueOf(2); //integer to numeric string ...
- 如何分析apache日志[access_log（访问日志）和error_log（错误日志）]
如何分析apache日志[access_log(访问日志)和error_log(错误日志)] 发布时间: 2013-12-17 浏览次数:205 分类: 服务器 默认Apache运行会access_l ...
- JAVA为什么会空指针异常
1.所谓的指针,就是java中的对象的引用.比如String s;这个s就是指针. 2.所谓的空指针,就是指针的内容为空,比如上面的s,如果令它指向null,就是空指针. 3.所谓的空指针异常,就是一 ...
- ExtJS实例1
1.创建一个Extjs的Window,用ajax请求HTML文件,并执行HTML的代码和脚本 窗体中文字是从一个HTML中获取,并且HTML中执行脚本使窗体高亮1秒 主页面: <!DOCTYPE ...
- Undefined symbols for architecture x86_64:
真机运行正常, 但要在模拟器运行的时候, 编译就报错了: 解决方法: 1.将Build Settings的Architectures修改为arm7 armv7s.Xcode7默认是加上arm64的,但 ...
- mysql group by 用法解析
group by语法可以根据给定数据列的每个成员对查询结果进行分组统计,最终得到一个分组汇总表.SELECT子句中的列名必须为分组列或列函数.列函数对于GROUP BY子句定义的每个组各返回一个结果. ...
- Linux下Fork与Exec使用
Linux下Fork与Exec使用 一.引言 对于没有接触过Unix/Linux操作系统的人来说,fork是最难理解的概念之一:它执行一次却返回两个值.fork函数是Unix系统最杰出的成就之一, ...