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,在网页设计中我们已经有能力完成一个美观的网页框架 但仅仅是网页框架不足以展现出网页的魅力, ...
随机推荐
- C#与C++之间类型的对应{转}
Windows Data Type .NET Data Type BOOL, BOOLEAN Boolean or Int32 BSTR String BYTE Byte CHAR ...
- 使用Rails 4.2+ 测试异步邮件系统
[导读]异步测试总是一个很大的问题,邮件发送测试更是让很多开发同学不知道从哪里入手.在新版的Rails里,这类测试在很大程度上被简化了. 以下为译文 在编写需要发送邮件的应用时,控制器是绝不能被阻塞的 ...
- HDU 4496 D-City(并查集，逆思维)
题目 熟能生巧...常做这类题,就不会忘记他的思路了... //可以反过来用并查集,还是逐个加边,但是反过来输出...我是白痴.....又没想到 //G++能过,C++却wa,这个也好奇怪呀... # ...
- KMP高质量代码实现详解
KMP算法 对于KMP算法我分为两个部分说明,第一部分是算法部分,介绍KMP算法的算法思想:第二部分是实现部分,介绍一种厉害的实现代码以及代码注释.当然了由于本文主要介绍怎么实现故而先分析实现,对KM ...
- POJ 2027
#include<iostream> using namespace std; int main() { int time; cin>>time; int a; int b; ...
- URAL 1586 Threeprime Numbers（DP）
题目链接 题意 : 定义Threeprime为它的任意连续3位上的数字,都构成一个3位的质数. 求对于一个n位数,存在多少个Threeprime数. 思路 : 记录[100, 999]范围内所有素数( ...
- node操作MongoDB数据库之插入
在上一篇中我们介绍了MongoDB的安装与配置,接下来的我们来看看在node中怎样操作MongoDB数据库. 在操作数据库之前,首先应该像关系型数据库一样建个数据库把... 启动数据库 利用命令提示符 ...
- 初学Ajax(一)
以下文字根据李炎恢——jQuery教程整理而成. Ajax全称为:“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是JavaScript的 ...
- 【转】Linux写时拷贝技术(copy-on-write)
http://www.cnblogs.com/biyeymyhjob/archive/2012/07/20/2601655.html 源于网上资料 COW技术初窥: 在Linux程序中,fork()会 ...
- Unable to open debugger port : java.net.ConnectException “Connection refused”
http://stackoverflow.com/questions/28283087/unable-to-open-debugger-port-java-net-connectexception-c ...