一.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;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>
运行效果：
