Comments (8)
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.
对象的创建
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.
描述一个对象
// 描述一个人
// 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.
构造函数
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.
转码解码
// 转码解码
// 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.
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.
拖拽效果.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">×</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.
拖拽轨迹回放
<!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)
- day2 HOT 10
- day3 HOT 5
- day4 HOT 5
- day4 HOT 4
- day12
- day13 HOT 2
- 正则表达式
- JavaScript工具函数大全(持续更新)
- JavaScript工具函数大全(持续更新) HOT 2
- 大厂面试题分享:如何让(a===1&&a===2&&a===3)的值为true? HOT 3
- 55 个提高你 CSS 开发效率的必备片段
- 继 NPM 被收购后,微软宣布推出 Github 口袋版!
- 给自己点时间再记记这200条Git命令 HOT 2
- 36个工作中常用的JavaScript函数片段
- try catch引发的性能优化深度思考
- 30 个极大提高开发效率的超级实用 VSCode 插件
- 大型前端项目如何实现 UI 可配置化
- 腾讯文档给 VSCode 贡献的 400 多行核心代码都干了什么
- 在腾讯这一年,坚守初心持续单纯 | 2021年终总结
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cv.