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 ...

随机推荐

css08盒子模型
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
用timer控件实现sleep效果
有时候我们需要代码延迟执行,这就需要用到Thread.Sleep()这个方法,但这个方法在主线程使用时会造成界面假死.使用timer控件既能达到代码延迟执行的效果,又不会有假死的困扰. 假设我们需要在 ...
hdu 1022
// hdu1022 这题算是我做的第一道栈的题目,之前看过栈的一些内容,做这道题的时候,可以模拟出过程,但是具体的代码不会写...所以决定练习一些栈和队列的问题,大概思路就是有三个数组和一个栈,先把 ...
css文件和js文件后面带一个问号
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
打开的IE网页不是最大化的解决方法
方法一:先把所有的IE窗口关了;只打开一个IE窗口;最大化这个窗口;关了它;OK,以后的默认都是最大化的了方法二:先关闭所有的IE浏览器窗口,用鼠标右键点击快速启动栏的IE浏览器图标,在出现的快捷菜 ...
解压版mysql安装--windows系统
1 解压到某个目录 2 配置配置文件 3 执行命令:安装目录/bin/mysqld --install mysql5.6 --defaults-file=指定配置文件位置 "安装目录/bin ...
Carthage&&cocopads 摘抄笔记
Carthage 是 iOS/Mac 开发生态圈的一个包管理工具,与现在流行的 CocoaPods 不同,它是一个去中心化的解决方案.知道它已经有一段时间了,但是一直没有好好玩过,今天整合 Carth ...
Oracle错误问题---- 《ora-12638：身份证明检索失败》
使用客户端可以连接,但只有一个站点出现此问题,非常郁闷,网上查了一下,发现是用户认证问题,解决办法如下: 在ORACLE客户端目录下 NETWORK/ADMIN下的sqlnet.ora,使用记事本打开 ...
自定义窗口 mfc
typedef struct _WNDCLASS { UINT style; //制定窗口的类型 WNDPROC lpfnWndProc; int cbClsExtra; //额外的数值 int cb ...
带格式导出数据到Excel
导出按钮事件 protected void Button1_Click(object sender, EventArgs e) { Response.Clear(); ...

JS(七)

JS(七)的更多相关文章

随机推荐

热门专题