一.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. [Bug]The maximum array length quota (16384) has been exceeded while reading XML data.

    写在前面 在项目中,有客户反应无法正常加载组织结构树,弄了一个测试的程序,在日志中查看到如下信息: Error in deserializing body of reply message for o ...

  2. Mysql 操作

    MySQL命令行导出数据库:1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录如我输入的命令行:cd C:\Program Files\MySQL\MySQL Server ...

  3. input:text 的value 和 attribute('value') 不是一回事

    如题,input:text 当手工输入字符改变其值时,两者就不一样了. 要获得手工输入,不要用attribute('value'), 直接使用value: function getbyid(id){ ...

  4. 真机模拟器.a文件编译报错

  5. POJ 1988

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 30005 using ...

  6. sream bytes[] img相互转换

    /// <summary> /// 将 Stream 转成 byte[] /// </summary> /// <param name="stream" ...

  7. ***php（codeigniter）中如何重定向

    Q: 在保存完数据之后需要重定向,防止数据重复提交. 我使用$this->方法名();跳转,发现不能达到重定向的效果(地址栏没变) 请教高手重定向怎么用 A: $this->load-&g ...

  8. HDU 3790 最短路径问题（SPFA || Dijkstra ）

    题目链接 题意 : 中文题不详述. 思路 :无论是SPFA还是Dijkstra都在更新最短路的那个地方直接将花费更新了就行,还有别忘了判重边,话说因为忘了判重边WA了一次. #include < ...

  9. poj 1724(有限制的最短路)

    题目链接:http://poj.org/problem?id=1724 思路: 有限制的最短路,或者说是二维状态吧,在求最短路的时候记录一下花费即可.一开始用SPFA写的,900MS险过啊,然后改成D ...

  10. 【poj1006-biorhythms】中国剩余定理

    http://poj.org/problem?id=1006 题意:中国剩余定理的裸题. 题目可转化为求最小的x满足以下条件: x%23=a;x%28=b;x%33=c; 关于中国剩余定理可看我昨天的 ...