Git Product home page Git Product logo

Comments (8)

Wscats avatar Wscats commented on August 15, 2024

Date

var date = new Date();
console.log(date);
console.log(date.toDateString());
//以特定的格式显示星期几、 月、 日和年
console.log(date.toTimeString());
//以特定的格式显示时、 分、 秒和时区
console.log(date.toLocaleDateString());
//以特定地区格式显示年、 月、 日
console.log(date.toLocaleTimeString());
//以特定地区格式显示时、 分、 秒
console.log(date.toUTCString());

var date2 = new Date("2015/08/22");
console.log(date2.getFullYear());

倒计时效果

var countDown = document.getElementById('countDown');
var btnBuy = document.getElementById('btnBuy');
// var endDate = '2017/2/23';
// 如何创建指定时间对象
var endDate = new Date('2017/8/29 07:43:10');
myCountDown();
var timer = setInterval(myCountDown, 1000);

function myCountDown() {
	var now = new Date();
	// 计算时间差
	// 把时间转换成毫秒数再相减
	// 372s = > 72分12s
	var offset = Math.floor((endDate.getTime() - now.getTime()) / 1000);
	// 格式：1天1小时20分30秒
	// 计算剩余秒数
	var secLeft = offset % 60;
	// 计算剩余的分钟数
	var minLeft = parseInt(offset / 60) % 60;
	var hourLeft = parseInt(offset / 60 / 60) % 24
	var dayLeft = parseInt(offset / 60 / 60 / 24)
	// 写入页面
	countDown.innerHTML = dayLeft + '天' + hourLeft + '时' + minLeft + '分' + secLeft + '秒';
	if(offset <= 0) {
		clearInterval(timer);

		// 改变为可购买图片路径
		btnBuy.src = 'img/btn_buy.jpg';

		// 隐藏倒计时
		countDown.style.display = 'none';
	}
}

随机颜色

var str = '0123456789abcdef';
function randomColor() {
	var res = '#';
	for(var i = 0; i < 6; i++) {
		// 先获取随机索引值
		var idx = Math.floor(Math.random() * str.length);
		res += str[idx];
	}
	return res;
}
// document.getElementById('myBody').style.backgroundColor = randomColor();
// 获取body元素的方式
document.body.style.backgroundColor = randomColor();

轮播图

var girl = document.getElementById('girl');
var btnStop = document.getElementById('btnStop');
//每3s切换一张图片
var idx = 1;
var timer = setInterval(carousel, 1000);
// 轮播函数
function carousel() {
	idx++;
	girl.src = 'img/g' + idx + '.jpg';
	if(idx >= 5) {
		// clearInterval(timer);
		idx = 0;
	}
}
// 点击暂停
btnStop.onclick = function() {
	if(timer) {
		clearInterval(timer);
		timer = undefined;
		btnStop.innerHTML = '轮播';
	} else {
		timer = setInterval(carousel, 1000);
		btnStop.innerHTML = '暂停';
	}

}

复杂的轮播图

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style>
			#container {
				position: relative;
				height: 320px;
				width: 320px;
				overflow: hidden;
			}
			
			#list {
				position: absolute;
				left: 0;
				width: 1600px;
				height: 320px;
			}
			
			img {
				float: left;
			}
		</style>
		<div id="container">
			<div id="list">
				<img src="../img/g1.jpg" alt="1" />
				<img src="../img/g2.jpg" alt="2" />
				<img src="../img/g3.jpg" alt="3" />
				<img src="../img/g4.jpg" alt="4" />
				<img src="../img/g5.jpg" alt="5" />
			</div>
		</div>
		<button id="start">开始</button>
		<button id="stop">停止</button>
		<button id="pre">前一张</button>
		<button id="nx">后一张</button>
		<script>
			var offset = 0;
			function move() {
				offset -= 320
				document.getElementById("list").style.left = (offset + "px");
				if(offset == -1600) {
					offset = 0;
					document.getElementById("list").style.left = "0px";
				}
			}
			document.getElementById("pre").onclick = function() {
				if(offset == 0) {
					offset = -1600;
				}
				offset += 320;
				document.getElementById("list").style.left = (offset + "px");
			}
			document.getElementById("nx").onclick = function() {
				if(offset == -1280) {
					offset = 320;
				}
				offset -= 320;
				document.getElementById("list").style.left = (offset + "px");
			}
			var animation = setInterval(move, 1000);
			document.getElementById("start").onclick = function() {
				clearInterval(animation)
				animation = setInterval(move, 1000);
			}
			document.getElementById("stop").onclick = function() {
				clearInterval(animation)
			}
		</script>
	</body>

</html>

from cv.

Wscats avatar Wscats commented on August 15, 2024

对象的创建

dog.smell = function() {
	console.log('闻一闻')
}
dog.lick = function() {
	console.log('舔一舔')
}
dog.bite = function() {
	console.log('咬一咬')
}

dog.smell();
dog.lick();
dog.bite();

// 对象的属性
// 对象有什么
var person = {
	name: 'xx',
	age: 18,
	gender: 'man'
}

// 对象的方法
// 对像能做什么
person.eat = function() {

}

// 封装：工厂函数
function createDog(opt) {
	// 1.创建一个对象
	var dog = {
		// ....
	}

	// 2.描述一个对象
	// 描述这个对象有什么
	// 描述这个对象能做什么
	dog.smell = function() {
		console.log('闻一闻')
	}
	dog.lick = function() {
		console.log('舔一舔')
	}
	dog.bite = function() {
		console.log('咬一咬')
	}

	return dog;
}
var dog1 = createDog({
	color: '#ff0',
	name: ''
});

from cv.

Wscats avatar Wscats commented on August 15, 2024

描述一个对象

// 描述一个人
// 1.人有什么特征（属性）
// 2.人能做什么（方法）
var person = {
	// 属性
	name: '三胖',
	gender: '男',
	age: 18,

	// 方法
	coding: function() {

	},
	play: function() {

	},
	eat: function() {}
}

// QQ聊天窗口
var qqchat = {
	title: '老姚',
	width: 480,
	height: 300,
	toolbar: [{}, {}],
	ad: [],
	msg: []
	textarea: obj,
	btnClose: '#btnClose',
	btnSend: '#btnSend'

	// 方法
	send: function() {},
	close: function() {},
	hongbao: function() {}
}

// 描述放大镜效果
var zoom = {
	smallImg: 'img/small.jpg',
	bigImg: 'img/big.jpg',
	width: 480,
	height: 300,
	bigContainer: '#bigContainer',

	// 方法
	// 初始化方法
	// 生成节点，绑定事件
	init: function() {},

	// 显示大图和放大镜
	show: function() {},

	// 隐藏
	hide: function() {

	}
}

from cv.

Wscats avatar Wscats commented on August 15, 2024

构造函数

var obj = new Object();
obj.name = '哈巴';

// 自定义构造函数
function Dog() {
	this.name = '哈巴';
	this.color = '白色';

	this.jiao = function() {
		console.log(`我的名字叫${this.name}`);
	}
}

// 调用自定构造函数
// 创建对象新方式
var habadog = new Dog();
console.log(habadog);
habadog.jiao();

// 普通函数执行方式
// Dog(); => undefined
// 构造函数的调用方式
// new Dog(); => 对象

// 构造函数的约定：首字母大写
// Oject,String,Number,Boolean,Date,RegExp,Array...

构造函数经历的步骤

// 自定义构造函数
function Dog() {
	/*
		以下4步在执行new Dog()时完成：
		1. var obj = new Object()
		2. 改变this的指向
		3. 执行内部代码，给对象写入属性/方法
		4. 返回一个对象
	 */
	this.name = '哈巴';
	this.color = '白色';

	this.jiao = function() {
		console.log(`我的名字叫${this.name}`);
	}
}

// 调用自定构造函数
// 得到一个对象，这个对象称之为：实例对象
var habadog = new Dog();

原型对象

// 构造函数
function SuperStar(name, age, type) {
	// 描述属性
	this.name = name;
	this.age = age;
	this.type = type;

	/*// 描述方法
	this.sing = function(){
		console.log(`我叫${this.name},我会唱歌`);
	}
	this.liaomei = function(){
		console.log(`我叫${this.name},我会撩妹`);
	}
	this.paoba = function(){
		console.log(`我叫${this.name},我会泡吧`);
	}*/
}

// 原型对象
// 利用原型对象优化代码
SuperStar.prototype.sing = function() {
	console.log(`我叫${this.name},我会唱歌`);
}
SuperStar.prototype.liaomei = function() {
	console.log(`我叫${this.name},我会撩妹`);
}
SuperStar.prototype.paoba = function() {
	console.log(`我叫${this.name},我会泡吧`);
}

console.log(SuperStar.prototype)

// 示例
var huge = new SuperStar('胡歌', 26, '影视明星');
var wuyifan = new SuperStar('吴亦凡', 22, '小鲜肉');
var marong = new SuperStar('马蓉', 28, '经纪人老婆');

console.log(huge, wuyifan, marong)
wuyifan.sing();

// 通过示例得到原型对象
// 通过wuyifan得到原型对象
// 私用属性：__proto__
// ES5的方法：Object.getPrototypeOf(实例)
console.log(wuyifan.__proto__);
console.log(Object.getPrototypeOf(wuyifan));

/*var obj = {}
obj.name = 'xxx';
obj.say = function(){
	alert(6666)
}
obj.call()*/

from cv.

Wscats avatar Wscats commented on August 15, 2024

转码解码

// 转码解码
// decodeURI()/decodeURIComponent()
var attr = decodeURIComponent(location.search);
console.log(location.search);
console.log(attr);
window.onload = function() {
	var btnRefresh = document.getElementById('btnRefresh');

	btnRefresh.onclick = function() {
		location.reload(true);
	}
}

window.onload

onclick/onload

console.log(document.body)
window.onload = function() {
	console.log(document.body)
}
console.log(document.body)

吸顶和置顶菜单

注意window.scrollY不能赋值

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>10吸顶菜单</title>
		<style>
			body {
				margin: 0;
				padding-bottom: 1000px;
			}
			
			header {
				height: 100px;
				background-color: #ffc;
			}
			
			#menu {
				width: 100%;
				height: 50px;
				background-color: #f00;
			}
			
			ul {
				line-height: 2;
			}
		</style>
		<script>
			window.onload = function() {
				var menu = document.getElementById('menu');
				// 滚动事件
				window.onscroll = function() {
					console.log(window.scrollY)
					// 获取滚动条滚动过的距离
					// window.scrollY
					if(window.scrollY >= 100) {
						menu.style.position = 'fixed';
						menu.style.left = 0;
						menu.style.top = 0;
					} else {
						menu.style.position = 'static';
					}
				}
				menu.onclick = function() {
					var scrollTop = window.scrollY;
					var timer = setInterval(function() {
						scrollTop -= 10;
						if(scrollTop <= 0) {
							scrollTop = 0;
							clearInterval(timer)
						}
						window.scrollTo(0, scrollTop)
					}, 50)
				}

			}
		</script>
	</head>
	<body>
		<header>
			欢迎光临
		</header>
		<div id="menu">
			吸顶菜单
		</div>
		<ul>
			<li>
				<a href="#">分类1</a>
			</li>
			<li>
				<a href="#">分类1</a>
			</li>
			<li>
				<a href="#">分类1</a>
			</li>
			<li>
				<a href="#">分类1</a>
			</li>
			<li>
				<a href="#">分类1</a>
			</li>
			<li>
				<a href="#">分类1</a>
			</li>
			<li>
				<a href="#">分类1</a>
			</li>
			<li>
				<a href="#">分类1</a>
			</li>
		</ul>
	</body>

</html>

from cv.

Wscats avatar Wscats commented on August 15, 2024

parentNode、previousSibling、nextSibling和previousElementSibling、nextElementSibling

表格增删查改

var table = document.querySelector("#table");
var tbody = table.querySelector("tbody");
var tr = document.querySelectorAll("#table tr");
console.log(tr)

function create() {
	var tr = document.createElement("tr");
	tr.innerHTML = "<th>1</th><th>2</th><th><button>Ok</button></th>";
	tr.querySelector("button").onclick = function() {
		tbody.removeChild(this.parentNode.parentNode)
	}
	tbody.appendChild(tr);
}
for(var i = 0; i < tr.length; i++) {
	var button = tr[i].lastElementChild.firstChild;
	button.onclick = function() {
		console.log("ok")
		console.log(button.parentNode.parentNode)
		tbody.removeChild(button.parentNode.parentNode)
	}
}

from cv.

Wscats avatar Wscats commented on August 15, 2024

拖拽效果.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>15拖拽效果</title>
	<style>
		.pop{position: absolute;width:480px;border:1px solid #ddd;}
		.pop header{padding-left:10px;height:40px;line-height:40px;border-bottom:1px solid #ddd;}
		.pop .content{padding:15px;min-height:100px;}
		.pop .btn-close{position:absolute;top:0;right:0;padding:10px;}
		.pop .btn-close:hover{background-color: #f00;color:#fff;}
	</style>
	<script>
		window.onload = function(){
			var pop = document.getElementsByClassName('pop')[0];
			var btnClose = pop.getElementsByClassName('btn-close')[0];
			var header = pop.getElementsByClassName('header')[0];

			// 给弹窗绑定mousedown事件
			header.onmousedown = function(evt){
				// 保存按下时光标距离header的距离
				var ox = evt.offsetX;
				var oy = evt.offsetY;

				// 在mousedown事件中给document绑定mousemove事件
				document.onmousemove = function(e){
					pop.style.left = e.clientX - ox + 'px';
					pop.style.top = e.clientY - oy + 'px';

					e.preventDefault();
				}
			}

			// 鼠标弹起后清除document的mousemove事件
			header.onmouseup = function(){
				document.onmousemove = null;
			}


			// 关闭
			btnClose.onmousedown = function(e){
				pop.style.display = 'none';
				
				// 阻止事件冒泡只能阻止同类事件
				e.stopPropagation();
			}


		}
	</script>
</head>
<body>
	<div class="pop">
		<header class="header">
			弹窗标题
		</header>
		<div class="content"></div>
		<span class="btn-close">&times;</span>
	</div>
</body>
</html>

事件监听

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>16事件监听</title>
	<script>
		window.onload = function(){
			document.addEventListener("click",function(){
				console.log("点击了DOM")
			})
			/*
				事件绑定的第二中方式：
				事件监听addEventListener()
			 */
			var btn =document.getElementById('btn');
			var btn2 =document.getElementById('btn2');

			// 这种事件绑定方法同名事件会被覆盖
			btn.onclick = function(){
				console.log('click');
			}

			btn.onclick = function(){
				console.log('第二次click');
			}

			btn.addEventListener('click',function(){
				console.log('第三次click');
			},false);

			btn.onclick = function(){
				console.log('第四次click');
			}

			// 清除事件
			btn.onclick = null;

			// 事件监听
			// addEventListener()
			btn2.addEventListener('click',function(e){
				console.log('第1次点击')
			},false);
			btn2.addEventListener('click',function(e){
				e.stopPropagation();
				console.log('第2次点击')
			},false);


			// 推荐的事件监听方式
			// 用具名函数
			function handler(){
				console.log('第3次点击')
			}
			btn2.addEventListener('click',handler,false);


			// 清除事件监听
			// 参数一定要跟绑定时一样
			btn2.removeEventListener('click',handler);


			// ie8-的事件监听方式
			// attachEvent('onclick',)
			// 没有第三个参数
			// btn2.attachEvent('onclick',handler);
			// 
			// IE8-清除事件监听
			// btn2.detachEvent('onclick',handler);
		}
	</script>
</head>
<body>
	<button id="btn">按钮</button>
	<button id="btn2">按钮2</button>
</body>
</html>

事件捕捉和冒泡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>17事件捕获</title>
	<style>
		#box{border:1px solid #ddd;padding:10px;}
	</style>
	<script>
		window.onload = function(){
			var box = document.getElementById('box');
			box.addEventListener('click',function(e){
				console.log('div#box');
				//e.stopPropagation();
			});
			document.body.addEventListener('click',function(e){
				console.log('body');
				// 阻止事件传播（捕获，冒泡）
				e.stopPropagation();
			},true);
			/*document.addEventListener('click',function(e){
				console.log('body2');
				// 阻止事件传播（捕获，冒泡）
				e.stopPropagation();
			},true);*/

			// 事件捕获
			document.addEventListener('click',function(){
				console.log('document');
			},true);
			window.addEventListener('click',function(){
				console.log('window');
			})
		}
	</script>
</head>
<body>
	<div id="box">
		事件捕获效果
	</div>
</body>
</html>

自定义菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>14自定义菜单</title>
	<style>
		ul{list-style: none;padding:0;margin:0;}
		.contextMenu{display:none;position:absolute;padding:1px;width:200px;border:1px solid #ddd;line-height:2;}
		.contextMenu li{position:relative;padding-left:10px;border-bottom:1px dotted #ddd;}
		.contextMenu li:last-child{border-bottom:none;}
		.contextMenu li:hover{background-color: #f5f5f5;}
		.contextMenu li span{position: absolute;right:10px;top:0;color:#999;}
	</style>
	<script>
		window.onload = function(){
			var contextMenu = document.getElementsByClassName('contextMenu')[0];
			// 给document绑定contextmenu事件
			document.oncontextmenu = function(e){
				e = e || window.event;
				contextMenu.style.left = e.clientX + 'px';
				contextMenu.style.top = e.clientY + 'px';
				contextMenu.style.display = 'block';
				// 阻止浏览器默认右键菜单
				if(e.preventDefault){
					e.preventDefault();
				}else{
					e.returnValue = false;
				}
			}
			// 点击空白处隐藏右键菜单 
			document.onclick = function(){
				contextMenu.style.display = 'none';
			}
			// ESC关闭
			document.onkeyup = function(e){
				e = e || window.event;
				var keyCode = e.keyCode || e.which;
				if(keyCode === 27){
					contextMenu.style.display = 'none';
				}
			}
			// contextMenu.onclick = function(e){
			// 	e.stopPropagation();
			// }
		}
	</script>
</head>
<body>
	<div class="contextMenu">
		<ul>
			<li>复制<span>Ctrl+C</span></li>
			<li>粘贴<span>Ctrl+V</span></li>
			<li>剪切<span>Ctrl+X</span></li>
			<li>删除<span>Del</span></li>
			<li>保存<span>Ctrl+S</span></li>
		</ul>
	</div>
</body>
</html>

from cv.

Wscats avatar Wscats commented on August 15, 2024

拖拽轨迹回放

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>18拖拽轨迹回放</title>
	<style>
		img{position: absolute;}
	</style>
	<script>
		window.onload = function(){
			/*
				拖拽轨迹回放
				1）鼠标按下且移动时，记录光标移动过的位置到数组arr_pos
				2）鼠标弹开后，依次把图片的top,left值改成arr_pos中的坐标
			 */
			var monkey = document.images[0];
			// 用于记录鼠标移动过的位置
			var arr_pos = [];
			// 给document绑定mousedown事件
			document.onmousedown = function(e){
				// 先记录按下时的坐标
				arr_pos.push({x:e.clientX,y:e.clientY});

				// 按下并移动时，记录移动过的位置坐标
				document.onmousemove = function(evt){
					arr_pos.push({x:evt.clientX,y:evt.clientY});
				}
			}
			// 鼠标弹起
			// 让图片沿着记录的坐标移动
			document.onmouseup = function(){
				var idx = 0;
				// 先把图片移动到记录坐标的初始位置
				monkey.style.left = arr_pos[idx].x + 'px';
				monkey.style.top = arr_pos[idx].y + 'px';
				// 启用攻击状态
				monkey.src = 'img/2.gif';
				var timer = setInterval(function(){
					idx++;
					monkey.style.left = arr_pos[idx].x + 'px';
					monkey.style.top = arr_pos[idx].y + 'px';
					// 当图片移动到最后的位置时，停止定时器
					if(idx>=arr_pos.length-1){
						clearInterval(timer);
						// 清空数组
						arr_pos = [];
						// 移动完成后回复初始状态
						monkey.src = 'img/1.gif';
					}
				},30);
				// 鼠标弹起后清除mousemove事件
				document.onmousemove = null;
			}
		}
	</script>
</head>
<body>
	<img src="img/1.gif">
</body>
</html>

from cv.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.