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,在网页设计中我们已经有能力完成一个美观的网页框架 但仅仅是网页框架不足以展现出网页的魅力, ...
随机推荐
- SQL Server 2008 R2评估期已过的解决办法
SQL Server 2008 R2评估期已过的解决办法 发现问题 北美产品测试服每日随机任务没有刷新 每日随机任务是使用数据库作业定期执行操作,重置玩家随机任务项 排查问题 www.2cto. ...
- HDOJ 1466 计算直线的交点数
将n 条直线排成一个序列,直线2和直线1最多只有一个交点,直线3和直线1,2最多有两个交点,......,直线n 和其他n-1条直线最多有n-1个交点.由此得出n条直线互不平行且无三线共点的最多交点数 ...
- javascript实现数据结构与算法系列：栈 -- 顺序存储表示和链式表示及示例
栈(Stack)是限定仅在表尾进行插入或删除操作的线性表.表尾为栈顶(top),表头为栈底(bottom),不含元素的空表为空栈. 栈又称为后进先出(last in first out)的线性表. 堆 ...
- rdtsc获取时间统计程序的运行效率
__u64 rdtsc() { __u32 lo,hi; __asm__ __volatile__ ( "rdtsc&q ...
- Too many levels of symbolic links 问题
Too many levels of symbolic links 问题 Posted on 2011-11-30 20:33 张贺 阅读(5826) 评论(0) 编辑 收藏 今天弄了个ZendStu ...
- [Qt] 界面美化 [2013-06-17更新]（转载）
- 经验总结 1. 可用对话框(QDialog)模拟类似Android中toast的效果. - 设置程序界面风格 在main函数中QApplication::setStyle("wi ...
- DevExpress licenses.licx 问题
在DevExpress ( 当然并不范指DevExpress,很多收费软件都是这样的)中,licenses.licx 是用户许可证书文件,当我们使用某些ActiveX(是Microsoft对于一系列策 ...
- CSS3实现页面的平滑过渡
这是文件的css,全部文件的话请到Github下载:点击这里 @charset "UTF-8"; @font-face {font-family: 'iconfont'; src: ...
- 【zoj2562】反素数
题意:给定一个数N,求小于等于N的所有数当中,约数最多的一个数,如果存在多个这样的数,输出其中最小的一个.(1 <= n <= 10^16) 题目:http://acm.hust.edu. ...
- MongoDB (八) MongoDB 文档操作
一. MongoDB 插入文档 insert() 方法 要插入数据到 MongoDB 集合,需要使用 MongoDB 的 insert() 或 save() 方法. 语法 insert() 命令的基 ...