小白小白从不日别的博客

分为两部分：上面部分为展示的图片下面部分为需要点击才能展示在上面的图片思路：获取ul中的每个li中的img以及上面部分默认展示的图片 给每张img添加点击事件 当点击下面的小图片时就将其src属性赋值给上面的图片的src即可 * { margin: 0; padding: 0; } .banner { widt...

由于这个案例比较简单，所以在这里就不去进行分析了，我们直接上代码：<div class="drawer"> <div class="drawer-content1"> <p>看到机会就积极争取，拥有的时候相当珍惜，缘尽失去的时候该放手就放手。</p> <p>好看的笑容就像玫瑰，是玫瑰就会凋零。</p> <p>一切行为在那个情境之下都好像注入了“能剧”的元素一般放缓了节奏，时光，因猛地缓慢反而

<div id="Total"> <div id="Title">-- 账户信息 --</div> <div class="item"> <span class="important">*</span> <label for="userAccount">用户名 :</label> <i..

涉及的知识点：该案例主要是利用鼠标事件来实现的，涉及鼠标按下事件、鼠标移动事件和鼠标抬起事件思路：当鼠标在要拖动的图片上按下鼠标时，此时也就相当于开关已经打开，也就表示可以进行拖动，因此在这里需要先进行判断，是否可以拖动 在鼠标拖动之前要先进行判断，是否可以拖动；在过程中需要设置临界值，以防止过界 当鼠标弹起时，需要判断是否是第一次，如果是就关闭开关，之后进行验证成功与否。在开始验证前需要设置一个容错范围，也就是在该范围内，都算验证成功，否则就是验证失败首先，先设置两个..

先搭架子： * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; background: red; } .line1, .line2 { width: 50

原理模拟单击鼠标右键，在这之前需要先禁用系统右键菜单事件当单击鼠标右键后，便会出现对应的选项点击不同的选项将会执行不同的“任务”代码如下： <ul> <li>我想去逛淘宝了！</li> <li>你真的忍心离开本页面吗？</li> <li>去百度搜索页面中选中的内容</li> <li>输入内容然后去百度搜索</li>

1.先搭架子： * { margin: 0; padding: 0; } .box { width: 400px; height: 400px; border: 1px solid #000; margin-top: 100px; margin-left: 100px;

<script> // 交换a和b的值 var a = 12; var b = 21; //方式1 引入中间变量 // var temp = a; // a = b; // b = temp; // console.log('互换后a的值为：' + a);//21 // console.log('互换后b的值为：' + b);//12 .

<script> //实现一个方法的连续调用 var Lin = { smoke: function() { console.log('Smoking,...xuan cool!!!'); return this; }, drink: function() { console.log('drink.

示例1：push()

<ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li></ul><script> var liCol = document.getElementsByTagName('li'); var len = liCol.length; .

由于这两个案例都比较简单，因此就不去过多的进行叙述，我们直接上代码看结果一、实现hover效果 <script> //创建ul标签，并设置相关样式 var ul = document.createElement('ul'); ul.style.listStyle = 'none'; ul.style.padding = '0'; var titleArr = ['首页', '军事', '娱乐', '新闻'];

首先，先搭架子： * { margin: 0; padding: 0; } .box { position: fixed; right: 0; bottom: 0; } .box>.top { width: 320px; ...

<script> //闭包实现私有化，防止污染全局变量 var name = 'jack'; var init = (function() { var name = 'xiaoxiao'; function callName() { console.log(name); } return function() { .

1.表单提交验证 .borderGreen { border: 2px solid green } .colorGreen { color: green } .borderRed { border: 2px solid red } .colorRed {

概念：将[不能被直接使用的数据]通过某种方法转变成[能够被直接使用的数据]的过程称为数据解析对于开发者来说最常见的数据解析就是将 **[字符串数据 ]** 解析为 **[对象数据]**下面以一个具体的案例来进行解析：思路：首先当点击提交按钮后需获取到相关的数据 将获取到的数据进行拆分 定义一个对象，接收拆分后的数据 最后，将此封装成一个函数，直接调用即可<form action="" method="get"> 姓名：<input t

原理：当点击全选按钮时，其对应的元素将被去全部选中；当点击反选按钮时，会选中没有选中的元素，之前选中的元素将失去选中；当点击全不选按钮时，其对应的元素都将失去选中状态核心：主要就是改变input标签的checked属性具体代码如下： <input type="button" id="All" value="全选" /> <input type="button" id="uncheck" value="不选" /> <input type="button

效果图： 先搭架子： * { margin: 0; padding: 0; } .clock { width: 300px; height: 600px; margin: 0 auto; background: url("images/clock.png"); .

<span>密码：</span> <input type="password" /> <span class="showSpan">大写锁定已关闭</span> //得到元素 var showSpan = document.querySelector('.showSpan'); var flag = false; //flag为标识符，false表示当前是关闭状态...

1.先搭架子 * { margin: 0; padding: 0; } .box { width: 800px; height: 190px; border: 1px solid #000; margin: 100px auto; } ul {

在开始这个案例之前我们首先要了解的是setInterval() 方法的基本用法：setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式，直到 clearInterval() 被调用或窗口被关闭返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行那么可能现在又需要提前了解以下**clearInterval()**方法的基本用法：clearInterval()取消由 setInterval() 函数设定的定时执行操作参数必须是由 setI

该案例主要利用了前面所学的 DOM操作二 的基本运用，具体的使用方法请参考 DOM操作二。由于该案例比较简单，因此在这里就不去过多的叙述，接下来我们就直接上代码，具体的一些注释代码里都有，相信大家都能看懂 <style> li:hover { background-color: #f40; color: #fff; } li { background-c

<script> // 封装type // 分两类：原始值、引用值 // 区分引用值 function type(target) { var template = { "[object Array]": "array", "[object Object]": "object", "[object Number]".

实现这个案例，其实还是比较简单的，主要考察和运用的就是 Date内置对象 ，利用Date内置对象分别获取当前的年月日时分秒注意点：在设置刻度的时候这里主要利用的是css3的旋转动画来实现的，总共12个时刻，那么每个时刻在前一个时刻的基础上应该增加30deg 在获取月份的时候注意要加1并且要判断是否大于10，如果小于10则应该在前面加上0 在获取当前的天数时，要判断是否大于10，如果小于10则应在天数前面加上0 在设置时分秒时亦是同样的道理，都需判断是否大于10，如果小于10...

首先，搭架子： * { margin: 0; padding: 0; } .box { width: 640px; height: 300px; border: 1px solid #000; margin: 100px auto; overflow: hidden;..

*{ margin: 0; padding: 0; /*禁用移动端的默认事件*/ touch-action: none; } html,body{ width: 100%; height: 100%; } .box{ width: 85px; ...

a.先搭架子： * { margin: 0; padding: 0; } .box { width: 670px; height: 300px; border: 1px solid #000; margin: 100px auto; position: rel...

* { margin: 0; padding: 0; } img { vertical-align: top; width: 100%; } <img src="images/nba-top.jpg" alt="" id="top"> <img src="images/nba-nav.jpg" alt...

思路：首先设计出它的静态样式，为了更合理，应该将底下的文字提示框隐藏起来大致效果如下：其次利用鼠标事件来完成该案例，需要用到的鼠标事件有：onmousemove(鼠标拖动时触发的事件)、onmousedown(鼠标按下时触发的事件)、onmouseup(鼠标离开时触发的事件)最后我们需要利用clientX属性先求出滚动条的起始临界X坐标的值，以防止出界需要注意的是当鼠标按下或者是离开的时候，其滚动条底下的文字提示框都应该隐藏现在看一下具体做法： <style>

a.二维数组转为一维数组：i.reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的语法：array.reduce(function(total,currentValuue,currentIndex,arr),initiaValue)let arr = [ [1, 4, 5, 6], [8, 4, 7, 6], [1, 5, 10, 47]

先看最终的成果吧！！！目录思路：难点：解决如何利用一张“幽灵”图使其产生多张在水平方向随机的幽灵：当点击“PLAY”按钮后，实现幽灵上浮效果 ：如何在“幽灵”身上随机产生字母：在键盘上按下对应的键，幽灵消失：源码：思路：用一张背景图当做游戏界面，一张图片当做游戏按钮，当点击“PLAY”按钮后，背景音乐开始播放、“幽灵”开始随机出现控制键盘的“keydown”事件，当“点击”了“幽灵”身上的对应的字母时，幽灵就被销毁难点：如何利用...

//定义一组函数，输入数字，逆转并输出汉字形式 function reverse() { var num = window.prompt('input'); var str = ''; for (var i = num.length - 1; i >= 0; i--) { //num[i]或charAt[i] str += transfer(...

方式1： const arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; //定义函数，降低数组维度 function fn(myArr) { const newArr = []; //遍历外层 for (let i = 0; i < myArr.length;

原理：当点击“删除”按钮时，广告消失思路：当鼠标点击“关闭”按钮后找到其父元素将父元素删除删除父元素可利用找到其父元素的父元素(parentNode)，然后再removeChild删除父元素即可 * { margin: 0; padding: 0; } .ad { position: fixed; left: 0;

当点击“循环”按钮时，当图片为最后一个或第一个时，再次点击时会自动切换到第一个或最后一个，然后正常切换当点击“非循环”按钮时，当图片为最后一个或第一个时，再次点击时将不再切换当点击“左右”按钮时图片会对应的向左、向右切换下面直接上代码：<div class="container"> <!-- 展示部分 --> <div class="imgShow"> <img id="imgData" src="./images/0.j.

最终效果：思路/步骤：拿到需要操作的元素通过事件监听视频是否加载完毕隐藏加载的动画 显示视频 获取视频的总时长 格式化获取到的时间监听播放按钮的点击判断当前是否处于播放/暂停状态 切换对应的图标监听视频播放的进度同步文本时间 同步进度条监听进度条的点击事件获取鼠标当前点击的位置监听视频是否已经播放完毕恢复播放时间 恢复图标 恢复时间 恢复进度条 恢复标记监听全屏按钮的点击源码：* { margin: 0; p.

示例1：

1.原理：点击相应的省则会对应的自动选择到相关的市2.涉及的核心知识点：1.select元素的option创建方式 [var option=new Option(‘显示的内容’);]2.select元素添加option元素 [select.options.add(新建的option);]3.select元素清空option的方式：[select.options.length=0;]4.select元素改变时触发的事件：[select.οnchange=function(){}]5.s

首先先利用html和css搭出架子： * { margin: 0; padding: 0; } .box { width: 190px; height: 270px; color: #fff; text-align: center; ...

<div> <b></b> abc <!--this is comment--> <strong> <span> <i></i> </span> </strong></div>