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,在网页设计中我们已经有能力完成一个美观的网页框架 但仅仅是网页框架不足以展现出网页的魅力, ...
随机推荐
- 自己写简单CoreDataManager封装对CoreData操作
关于CoreData的介绍太多,网上一搜大把全是,这里不介绍CoreData,直接上代码,注释写的很详细,应该很容易理解,暂时现做简单的增删该查,后面有时间再做修改完善. CoreDataManage ...
- SEO优化的黑帽手法是否值得使用?
PR劫持 可能很多人也会听到说,什么网站权重越高越好,这也就是后面越来越多人都对谷歌的PR的宣传看的很重,自建站的都追求PR值,权重越高代表这个网站越受信任. 比如一个新站PR值为0,一个老站PR为6 ...
- MEAN实践——LAMP的新时代替代方案（上）
摘要:90 年代,LAMP 曾风靡一时,然而随着需求的变迁和数据流量的激增,LAMP 已不可避免的走下神坛.近日,在 MongoDB Blog 中,Dana Groce 介绍了一个基于新时代架构的实践 ...
- VC中Source Files, Header Files, Resource Files,External Dependencies的区别
VC中Source Files, Header Files, Resource Files,External Dependencies的区别 区别: Source Files 放源文件(.c..cpp ...
- SPOJ375 Query on a tree(LCT边权)
之前做了两道点权的LCT,这次做一下边权的LCT.上网找了一下资料,发现对于边权的LCT有这么两种处理方法,一种是每条边建一个点,于是边权就转成点权了.另外一种则是每个边权对应到点权上,也就是每个点对 ...
- isMobile 一个简单的JS库，用来检测移动设备
点这里 github地址:https://github.com/kaimallea/isMobile Example Usage I include the minified version of t ...
- LINUX输入输出与文件
1 文件描述符 内核为每个进程维护一个已打开文件的记录表(实现为结构体数组),文件描述符是一个较小的正整数(0-1023)(结构体数组下标),它代表记录表的一项,通过文件描述符和一组基于文件描述符的文 ...
- 【XJOI-NOIP16提高模拟训练9】题解。
http://www.hzxjhs.com:83/contest/55 说实话这次比赛真的很水..然而我只拿了140分,面壁反思. 第一题: 发现数位和sum最大就是9*18,k最大1000,那么su ...
- 执行脚本出现bin/bash: bad interpreter: No such file or directory
-bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory VI打开文件,没发现任何问题, 把/bin/bash ...
- CSS3通配符
在 CSS3 中,追加了三个属性选择器分别为: [att*=val] ----内容包含 [att^=val] ----开头匹配 [att$=val] ----结尾匹配 示例: <!DOCTYPE ...