臧小川的博客

效果图结构 <input type="text" id="username"> <input type="checkbox" name="" id="remember">记住用户名js var username = document.querySelector('#username'); var remember = document.querySelector('#remember'); if (localSto

本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同事也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储戴昂的数据，HTML5规范提出了相关解决方案本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符，可以将对象JSON.stringify()编译后存储window.sessionStorage生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以

效果图结构 <div id="c-nav" class="c-nav"> <span class="cloud"></span> <ul> <li class="current">首页新闻</li> <li>活动策划</li> <li>师资力量</li> <li

效果图结构 <div class="slide-bar"> <span class="goBack">返回顶部</span> </div> <div class="header">头部区域</div> <div class="banner">banner区域</div> <div class="main">主体区域</div>CSS

文件过多 无法全部展示 详情请看下面跳往轮播图

效果图结构 <div class="sliderbar"> <span>--</span> <div class="con">问题反馈</div> </div> <script src="animate.js"></script>CSS .sliderbar { position: absolute;

效果图结构### <button class="btn500">点击夏雨荷才走到500</button> <button class="btn800">点击夏雨荷才走到800</button> <div></div> <span>夏雨荷</span>CSS div { position: absolute; l

效果图结构 <button class="btn500">点击夏雨荷才走到500</button> <button class="btn800">点击夏雨荷才走到800</button> <div></div> <span>夏雨荷</span>CSS div { position: absolute; left:

效果图结构 <button>点击夏雨荷才走</button> <div></div> <span>夏雨荷</span>CSS div { position: absolute; left: 0; width: 100px; height: 100px; background-

效果图结构 <div></div> <span></span>CSS div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span {

动画原理1 获得盒子当前的位置2 让盒子在当前位置加上1个移动距离3 利用定时器不断重复这个操作4 加一个结束定时器的条件5 注意此元素需要添加定位 才能使用element.style.left效果图结构 <div></div>CSS div { position: absolute; left: 0; width: 100px; hei.

mouseover 鼠标经过自身盒子会触发 经过子盒子还会触发mouseenter 只有经过自身盒子触发 因为不会冒泡mouseleave 鼠标离开触发 同样不会冒泡结构 <div class="father"> <div class="son"></div> </div>CSS .father { width: 200px; height: 200px..

效果图结构 <div class="slide-bar"> <span class="goBack">返回顶部</span> </div> <div class="header">头部区域</div> <div class="banner">banner区域</div> <div class="main">主体区域</div>..

效果图结构 <div> 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 .

像素比和pagehow事件

// 立即执行函数 不需要调用 立马能够自己执行的函数 function fn () { console.log(1); } fn(); // 2 写法 也可以传递参数进来 // (function () { })() 或者(function () { }()) (function (a, b) { conso...

flexible(function flexible(window, document) { var docEl = document.documentElement//获取html的根元素 var dpr = window.devicePixelRatio || 1//物理像素比(屏幕)，如果没有就 当成1来用 //创建一个设置body的fontsize的函数 function setBodyFontSize() { if (document.body)

效果图结构 <div></div>CSS div { width: 200px; height: 200px; background-color: pink; border: 10px solid red; padding: 10px; }js // client 宽度 和我们 offsetWi

仿京东放大镜效果

计算鼠标在盒子中的坐标

效果图结构 <div class="box"></div>CSS .box { width: 200px; height: 200px; background-color: pink; margin: 200px; }JS // 我们在盒子内点击 想要得到鼠标距离盒子左右的距离 // 首先得到鼠标在页面中的

效果图结构 <div class="box" style="width:200px"></div>CSS .box { width: 200px; height: 200px; background-color: pink; padding: 10px; }JS // offset 与style的区别 v.

结构 <div class="father"> <div class="son"></div> </div> <div class="w"></div>CSS * { margin: 0; padding: 0; } .father { position: relati..

history对象

结构 <button>点击</button>JS var btn = document.querySelector('button'); btn.addEventListener('click', function () { // 记录浏览历史 可后退 // location.assign('http://baidu.com'); // 不记录浏览历史 不.

login <form action="18.index.html"> 用户名: <input type="text" name="uname"> <input type="submit" value="登录"> </form>index <div></div> console.log(location.search); // ?uname=andy

效果图结构 <button>点击</button> <div></div>js var div = document.querySelector('div'); var btn = document.querySelector('button'); var timer = 5; btn.addEventListener('click', function ()

什么是location对象URLlocation对象的属性

JS 执行机制

JS 是单线程同步和异步效果图1 问2 问JS第一个问题 setTimeout(function () { console.log(3); }, 1000) console.log(2);第二个问题 console.log(1); setTimeout(function () { console.log(3);

JS全局作用域或者普通函数中this直线全局对象 window (注意定时器里面的this window) console.log(this); function fn () { console.log(this); } fn(); window.setTimeout(function () { console.log(this); .

效果图按钮点击之后 会禁用 disabled 为 true同时按钮里面的内容会变化 注意 button里面的内容通过 innerHTML 修改面秒数是有变化的 因此需要用到定时器定义一个变量 在定时器里面 不断递减如果变量为 0 说明到了时间 我们需要停止定时器 并且复原按钮初始状态结构 手机号码：<input type="number"> <button>发送</button>JS var btn = document.qu

效果图结构 <button class="begin">开启定时器</button> <button class="stop">停止定时器</button>JS var begin = document.querySelector('.begin'); var stop = document.querySelector('.stop'); var timer = null;// 全局变量

效果图结构 <div> <span class="day"></span> <span class="hour"></span> <span class="minute"></span> <span class="second"></span> </div>CSS div span {

效果图JS setInterval(function () { console.log('集中一点连续爆破'); }, 3000)

结构 <button>爆炸停止吧</button>JS window.addEventListener('load', function () { var btn = document.querySelector('button'); var timer = setTimeout(function () { alert('我爱你'); }, 3000).

5秒之后自动关闭广告

效果图JS function callback() { console.log('爆炸吧'); } var timer1 = setTimeout(callback, 2000); var timer2 = setTimeout(callback, 3000);