一.Javascript获取系统当前时间

<script type="text/javascript">

             var time = new Date();

             var datetime = time.toLocaleString();

             alert(datetime);

</script>

运行效果：

二.Script获取div宽度：

<div id="test" style="border:1px solid #000;width:50px;height:50px;">这是测试的div</div>

        <script>

            function test(){

                var test = document.getElementById("test"); //获得元素

                var w = test.offsetWidth; //获得原始宽

                alert("div的宽是："+w);

            //    test.style.width = w + 'px'; //设置宽度

            }

            test();

        </script>

运行效果：

三.json树形菜单

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>json树形菜单</title>

</head>

<body>

    <h2>构建json树形菜单</h2>

    <div class="tree" id="tree"></div>

    <script type="text/javascript">

    window.onload = function(){

        var Menu = [{

            tit:"一级菜单",

            submenu:[{

                tit:"二级菜单",

                url:"",

                func:function(){

                    alert('what do you want to do?');

                }

            },{

                tit:"二级菜单",

                func:function(){

                    alert('do what?');

                },

                submenu:[{

                    tit:"三级菜单",

                    url:"",

                    submenu:[{

                        tit:"四级菜单",

                        url:""

                    },{

                        tit:"四级菜单",

                        url:""

                    }]

                },{

                    tit:"三级菜单",

                    url:""

                }]

            }]

        },{

            tit:"一级菜单",

            submenu:[{

                tit:"二级菜单",

                url:""

            },{

                tit:"二级菜单",

                submenu:[{

                    tit:"三级菜单",

                    url:""

                },{

                    tit:"三级菜单",

                    url:""

                }]

            }]

        }];

    //构建菜单

     menuTree(Menu,document.getElementById('tree'),'tree');

    }

    /*

     * @构建树形菜单

     * @arrJson:json数据

     * @container:菜单容器

     */

    function menuTree(jsonArr,container,treeId){

        var oText,oUrl;

        var oUl = document.createElement('ul');

        for(var i = 0 ;i < jsonArr.length; i++){

            var oLi = document.createElement('li');

            oUrl = jsonArr[i].url || "javascript:void(0)";

            oText = jsonArr[i].tit;

            if(jsonArr[i].submenu){

                 oLi.innerHTML ='<a href="'+oUrl+'">'+oText+'</a>';

                 menuTree(jsonArr[i].submenu,oLi);//递归构建子菜单

            }else{

                oLi.innerHTML = '<a href="'+oUrl+'">'+oText+'</a>';

            }

            //自定义函数

            if(typeof jsonArr[i].func =="function"){

                oLi.getElementsByTagName('a')[0].func = jsonArr[i].func;

                oLi.getElementsByTagName('a')[0].onclick=function(){

                    this.func();

                }

            }

            oUl.appendChild(oLi);

        }

        //最外层容器事件委托

        if(treeId){

            document.getElementById(treeId).onclick = function(e){

                var event = e || window.event;

                var target = event.target||event.srcElement;

                var next = target.nextSibling;

                if(target.nodeName.toLowerCase() == "a"){

                    if(next){

                        if(next.style.display=="" || next.style.display=="block"){

                            next.style.display="none";

                        }else{

                            next.style.display="block";

                        }

                    }

                }

            }

        }

        container.appendChild(oUl);

    }

    </script>

</body>

</html>

运行效果：

四.新品与热卖

<!DOCTYPE html>

<html>

<head>

    <title>新品与热卖</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style type="text/css">

        #content{

            font-family: "微软雅黑";

            border-top: 1px solid #ccc;

            width: 1205px;

            margin: 0 auto;

            overflow: hidden;

            text-align: center;

        }

        .box{

            border: solid 1px #ccc;

            width: 300px;

            height: 500px;

            float: left;

            position: relative;

            overflow: hidden;

            margin:-1px -1px 0 0;

        }

        img{

            margin-top: 40px;

            width: 300px;

            height: 300px;

        }

        .p2{margin-top: 30px;

            color: #1f8657;

            font-size: 18px;

        }

        .span1,.span2{

            position: absolute;

            top: 20px;

            right: -60px;

            height: 40px;

            line-height: 40px;

            width: 200px;

            color: #fff;

            display: block;

            transform: rotate(45deg);

            background: #39bf9A;

            box-shadow: 5px 5px 5px #3c3c3c;

        }

        .span2{

            background: #fb5151;

            box-shadow: 5px 5px 5px #dedbda;

        }

    </style>

    <script src="./js/jquery-1.10.2.min.js"></script>

</head>

<body>

    <div id="content">

    </div>

    <script type="text/javascript">

        var obj=[{name:"dack1",price:"￥1338",desc:"A57 玫瑰金 1600万美颜自拍",url:"./imgs/oppo4.png",state:"热卖"},

                 {name:"dack2",price:"￥1308",desc:"R9s 黑色版 全新配色",url:"./imgs/oppo1.png",state:"新品"},

                 {name:"dack3",price:"￥1208",desc:"R9s 黑色版 全新配色",url:"./imgs/oppo2.png"},

                 {name:"dack4",price:"￥2328",desc:"R9s 黑色版 全新配色",url:"./imgs/oppo3.png",state:"热卖"},

        ];

        var state;

        $.each(obj,function(index,obj){

            $("#content").append(

                    "<div class='box'>"+

                        "<span>"+obj.state+"</span>"+

                         "<img class='img' src="+obj.url+">"+

                        "<p class='p1'>"+obj.desc+"</p>"+

                         "<p class='p2'>"+obj.price+"</p>"+

                    "</div>"

                );

                state=obj.state;

            if (state=="热卖") {

                $(".box span").eq(index).addClass("span2");

            }else if(state=="新品"){

                $(".box span").eq(index).addClass("span1");

            }else if(state == undefined){

                $(".box span").eq(index).empty();

            }

        });

    </script>

</body>

</html>

运行效果：

Javascript零散知识点总结的更多相关文章

  1. JavaScript 零散知识点1 （正则表达式+定时器+hover）

    1.clear:both清楚浮动影响//css中 2.正则表达式 search方法 :指明是否存在相应的匹配,如找到一个返回一个整数值,表明这个匹配距离字符串开始的偏移位置,如果没有找到匹配返回-1f ...

  2. Javascript重要知识点梳理

    Javascript重要知识点梳理 一.Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for 二.Javas ...

  3. ACM个人零散知识点整理

    ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...

  4. Android 零散知识点整理

    Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...

  5. Javascript + Dom知识点总结

    Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...

  6. Android零散知识点积累

    本文仅在记录android开发中遇到的零散知识点,会不断更新... 目录 .隐藏系统标题栏 .图片尺寸及屏幕密度 3.获取顶部状态栏高度 1.隐藏系统标题栏 1)在资源文件styles.xml中定义样 ...

  7. javaScript常用知识点有哪些

    javaScript常用知识点有哪些 一.总结 一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...

  8. 前端开发 JavaScript 干货知识点汇总

    很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...

  9. JavaScript基本知识点——带你逐步解开JS的神秘面纱

    JavaScript基本知识点--带你逐步解开JS的神秘面纱 在我们前面的文章中已经深入学了HTML和CSS,在网页设计中我们已经有能力完成一个美观的网页框架 但仅仅是网页框架不足以展现出网页的魅力, ...

随机推荐

  1. PostgreSQL数据库中获取表主键名称

    PostgreSQL数据库中获取表主键名称 一.如下表示,要获取teacher表的主键信息: select pg_constraint.conname as pk_name,pg_attribute. ...

  2. 如何让360、遨游、猎豹等双核浏览器默认以webkit内核渲染网页？

    众知目前国内不少浏览器都自称双核,一般是 IE(Trident)+Webkit.因为 webkit 急速的体验和对 HTML5 的支持,有些情况下开发者可能希望用户优先甚至只使用 webkit 内核渲 ...

  3. CodeForces 321A

    A. Ciel and Robot time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  4. HDOJ 1085 Holding Bin-Laden Captive! （母函数）

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  5. HDU4010 Query on The Trees(LCT)

    人生的第一道动态树,为了弄懂它的大致原理,需要具备一些前置技能,如Splay树,树链剖分的一些概念.在这里写下一些看各种论文时候的心得,下面的代码是拷贝的CLJ的模板,别人写的模板比较可靠也方便自己学 ...

  6. codeforces 439C Devu and Partitioning of the Array（烦死人的多情况的模拟）

    题目 //这是一道有n多情况的烦死人的让我错了n遍的模拟题 #include<iostream> #include<algorithm> #include<stdio.h ...

  7. POJ 2101

    #include <iostream> #include <algorithm> #include <cmath> using namespace std; int ...

  8. DF学Mysql（三）——Mysql数据类型

    Mysql数据类型分为:整数类型.浮点数类型.定点数类型日期与时间类型字符串类型二进制类型 整数类型 字节数 无符号数取值范围 有符号数取值范围TINYINT 1 0-255 -128-127SMAL ...

  9. mvc5 错误页如何定义

    项目根目录下的Web.config <system.web> <customErrors mode="On" defaultRedirect="~/Er ...

  10. Windows服务创建及安装

    Windows服务创建及安装http://www.cnblogs.com/tuyile006/archive/2006/11/27/573654.html