Javascript零散知识点总结
一.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零散知识点总结的更多相关文章
- JavaScript 零散知识点1 （正则表达式+定时器+hover）
1.clear:both清楚浮动影响//css中 2.正则表达式 search方法 :指明是否存在相应的匹配,如找到一个返回一个整数值,表明这个匹配距离字符串开始的偏移位置,如果没有找到匹配返回-1f ...
- Javascript重要知识点梳理
Javascript重要知识点梳理 一.Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for 二.Javas ...
- ACM个人零散知识点整理
ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...
- Android 零散知识点整理
Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...
- Javascript + Dom知识点总结
Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...
- Android零散知识点积累
本文仅在记录android开发中遇到的零散知识点,会不断更新... 目录 .隐藏系统标题栏 .图片尺寸及屏幕密度 3.获取顶部状态栏高度 1.隐藏系统标题栏 1)在资源文件styles.xml中定义样 ...
- javaScript常用知识点有哪些
javaScript常用知识点有哪些 一.总结 一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- JavaScript基本知识点——带你逐步解开JS的神秘面纱
JavaScript基本知识点--带你逐步解开JS的神秘面纱 在我们前面的文章中已经深入学了HTML和CSS,在网页设计中我们已经有能力完成一个美观的网页框架 但仅仅是网页框架不足以展现出网页的魅力, ...
随机推荐
- 如何修正导入模型的旋转? How do I fix the rotation of an imported model?
原地址:http://game.ceeger.com/Manual/HOWTO-FixZAxisIsUp.html Some 3D art packages export their models s ...
- HDU 4496 D-City(并查集，逆思维)
题目 熟能生巧...常做这类题,就不会忘记他的思路了... //可以反过来用并查集,还是逐个加边,但是反过来输出...我是白痴.....又没想到 //G++能过,C++却wa,这个也好奇怪呀... # ...
- DevExpress licenses.licx 问题
在DevExpress ( 当然并不范指DevExpress,很多收费软件都是这样的)中,licenses.licx 是用户许可证书文件,当我们使用某些ActiveX(是Microsoft对于一系列策 ...
- java volatile 和Transient 关键字
java关键字volatile volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同 ...
- http://www.cnblogs.com/leiOOlei/p/5075402.html
http://www.cnblogs.com/leiOOlei/p/5075402.html
- Template
创建win32应用程序空工程 //main.cpp//time: 01/08/2013 #include<d3d9.h>#include <d3dx9.h> #pragma c ...
- lintcode：完美平方
题目 给一个正整数 n, 找到若干个完全平方数(比如1, 4, 9, ... )使得他们的和等于 n.你需要让平方数的个数最少. 样例 给出 n = 12, 返回 3 因为 12 = 4 + 4 + ...
- mq_notify
NAME mq_notify - 通知进程可以接收一条消息 (REALTIME) SYNOPSIS #include <mqueue.h> int mq_notify(mqd_t mqde ...
- 使用xshell链接本地虚拟机中的Linux
昨天想在自己机器上安装一下Linux,并使用xshell访问,可是费了很长时间,在xshell端都提示“Could not connect to '192.168.54.100' (port 22): ...
- 负载均衡之Haproxy配置详解（及httpd配置）
下图描述了使用keepalived+Haproxy主从配置来达到能够针对前段流量进行负载均衡到多台后端web1.web2.web3.img1.img2.但是由于haproxy会存在单点故障问题,因此使 ...