随笔分类 - 3_6：JS常见特效
摘要：代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
阅读全文
摘要：1）思路 //1 小的复选框按钮状态是跟着 全选复选框的状态的 //2 小的 一 全选按钮 代码 //1 全选按钮影响子按钮 $(".checkall").change(function () { //把全选按钮的checked值赋值给三个小的复选框 $(".j-checkbox,.checkall
阅读全文
摘要：1）基础原理 //1 鼠标经过某个li有两步操作 //2 当前小li宽度变为224px 同时里面 小图片谈出 大图片淡入 //3 其余兄弟小li宽度变69px 小图片淡出 大图片淡入 2）代码实现 <!doctype html> <html> <head> <meta charset="utf-8"
阅读全文
摘要：代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-sty
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：案例分析 //案例分三大块 //1 鼠标经过图片盒子 遮罩盒子 和 放大镜盒子显示 鼠标离开 它们隐藏 //2 遮罩层跟随鼠标移动功能 //3 移动黄色遮罩层 大图片跟随移动 1）第一部分思路 2）第二部分思路 3）第三部分思路 4）最大移动值的概念 代码实现 <!DOCTYPE html> <ht
阅读全文
摘要：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px;
阅读全文
摘要：登录页面 login <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <form action="index.html" method="get"> <
阅读全文
摘要：知识梳理 // 1 button 比较特殊 获取它的值不是value 而是innerHTML 核心逻辑 // 1 点击按钮后鼠标禁用 // 2 按钮里面的内容有变化 button的内容用innerHTML获取 // 3 里面的秒数有变化 需要用到定时器 // 4 定义一个变量 在定时器里面 不断递减
阅读全文
摘要：用到了 重复定时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：图片放大镜用的就是这个思路 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, init
阅读全文
摘要：1）禁止复制功能 //1 禁止鼠标选中文字 document.onselectstart = function (e) { e.preventDefault(); } //2 禁止鼠标右键菜单 document.oncontextmenu = function (e) { e.preventDefa
阅读全文
摘要：1）排他思想 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //1 获取所有按钮元素 var btns
阅读全文
摘要：//核心思路 //1 需要得到系统时间 //2 用多分支设置不同的图片个问候语 //3 修改图片的src属性 //4 div来存放问候语 修改里面的内容 //1 获取页面元素 var img = document.getElementsByTagName('img');//得到图片元素对象 var
阅读全文
摘要：<button id="btn">按钮</button> <input type="text" value="请输入内容"> <script> //需求: 点击按钮 表单里面的值改变 //1 获取元素 var btn = document.querySelector('#btn'); var inp
阅读全文
摘要：用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
阅读全文
摘要：当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
阅读全文
