课程案例
黑马pink老师课程的作业试答
Codefreyy
Code for happiness :D
展开
-
JavaScript - 用户名表单验证
效果代码html: <input type="text" class="uname"> <span>请输入用户名</span> <div class="hint"></div>css: label { color: #ccc; } .right { color: green; }原创 2022-04-02 16:40:52 · 1727 阅读 · 0 评论 -
JavaScript - 选项卡切换、增加、删除、修改【面向对象方法】
/* 面向对象:把公共的属性和方法抽取出来,写到类里面,再根据类实例化对象 *///Tab对象:1、切换 2、添加 3、删除 4、修改原创 2022-03-28 20:43:16 · 961 阅读 · 0 评论 -
移动端JavaScript - 手指触摸并拖动对象
div.addEventListener('touchstart', function (e) { startX = e.targetTouches[0].pageX; //每触摸一次,获得手指的初始触摸的位置,并存进(startX,startY) startY = e.targetTouches[0].pageY; x = this.offsetLeft; //获得盒子一开始的位置,并存进(x,y) y =原创 2022-03-25 20:20:09 · 1752 阅读 · 1 评论 -
JavaScript - 选项栏底色跟随鼠标移动而变化
//当鼠标经过某个li,就把current类(变红加下划线赋予给它) for (var i = 0; i < lis.length; i++) { var current = 0; //声明一个变量记录当前红色块的位置 lis[i].addEventListener('mouseenter', function () { move(cloud, this.offsetLeft);原创 2022-03-25 16:28:04 · 1651 阅读 · 0 评论 -
JavaScript - 侧边栏返回顶部 缓动效果(pink老师课堂案例)
// 点击【返回顶部】模块,就让窗口滚动回最上方 goBack.addEventListener('click', function () { moveTop(window, 0); })原创 2022-03-25 15:00:59 · 1060 阅读 · 0 评论 -
JavaScript - 鼠标经过侧边栏弹出效果(pink老师案例)
效果:代码1、封装一个缓动函数function move(obj, target, callback) { // 清除多次点击后的定时器,保留最新的那一次 clearInterval(obj.timer); // 使用obj.timer,把timer当作obj的属性,如果使用var timer = ,调用一次就会开辟一次内存空间 obj.timer = setInterval(function () { //对步长向上取整,因为除以10.原创 2022-03-23 22:19:56 · 1018 阅读 · 0 评论 -
JavaScript - 缓动动画(移动速度由快到慢)
盒子不是匀速移动的,而是由快到慢,缓缓停下,看起来比较顺滑。原创 2022-03-23 21:00:08 · 1100 阅读 · 0 评论 -
JavaScript - 固定的侧边栏(附效果动图)
效果侧边栏始终和上面隔着固定距离核心代码<script> //获取元素 var side = document.querySelector('.side'); var banner = document.querySelector('.banner'); var goBack = document.querySelector('.goBack'); var main = document.q..原创 2022-03-23 00:20:58 · 1139 阅读 · 0 评论 -
JavaScript - 京东放大镜效果:鼠标移动查看图片放大细节
效果JS代码window.addEventListener('load', function () { //获取元素 var small = document.querySelector('.preview-img'); var big = document.querySelector('.belt'); var mask = document.querySelector('.mask'); var img = document.querySelecto原创 2022-03-21 22:55:11 · 1327 阅读 · 0 评论 -
Web - JavaScript - 实现拖动对话框(模态框)
title.addEventListener('mousedown', function (e) { //当鼠标按下,且移动的时候,页面坐标 - 鼠标在登录框里的位置 = 登录框和页面边的距离 var fixX = e.pageX - login.offsetLeft; var fixY = e.pageY - login.offsetTop; //鼠标移动 document.addEventL原创 2022-03-20 23:10:14 · 895 阅读 · 0 评论 -
Pink老师JavaScript课堂案例 - 页面跳转倒计时
var timer = setInterval(function () { if (time == 0) { //如果时间减到了0,跳转至首页(或其他指定页面) location.href = 'http://www.baidu.cn'; clearTimeout(timer); } else { //时间不等原创 2022-03-20 12:51:17 · 112 阅读 · 0 评论 -
Pink老师JavaScript课堂案例 - 发送验证码60秒倒计时效果
btn.addEventListener('click', function () { btn.disabled = true; var timer = setInterval(function () { if (time == 0) { clearInterval(timer); btn.disabled = false;原创 2022-03-20 11:19:32 · 323 阅读 · 0 评论 -
Pink老师JavaScript课堂案例 - 倒计时
function countDown() { var nowTime = +new Date(); //现在时间 var times = (inputTime - nowTime) / 1000; //现在时间和用户输入时间的时间差(单位为ms) var h = parseInt(times / 60 / 60 % 24); //时,最后用取余号是因为,我们只需要不满24小时的时,满的会升为天 h = h原创 2022-03-19 23:34:50 · 598 阅读 · 0 评论 -
Pink老师JavaScript课程作业 - 输入内容时 上方出现大号提示框(京东快递单号输入框模拟)
input.addEventListener('keyup', function () { //当按键抬起时 //如果输入框内容不为空,则显示提示框 if (this.value != '') { con.style.display = 'block'; //将this 当前输入的值赋给提示框 con.innerText = this.value;原创 2022-03-15 10:25:25 · 666 阅读 · 0 评论 -
Pink老师JavaScript课堂案例 - 按下键盘某键 输入框获得焦点
当按键按下抬起时(keyup),运行keyCode返回ASCII码,判断ASCII码是不是对应按键的ASCII码,如果是则执行.focus()方法,让输入框获得焦点。原创 2022-03-15 09:59:02 · 531 阅读 · 0 评论 -
Pink老师JavaScript课堂案例 - 动态创建表格
for (var k in datum[i]) { //假设i=0,对于datum[0],遍历其中的属性 /* 注: for (var k in obj) { k得到的是属性名; obj[k]得到的是属性值 } */ var td = document.createElement('td'); // 创建单元格 td.i原创 2022-03-15 08:58:16 · 571 阅读 · 0 评论 -
Pink老师JavaScript课堂案例 - 跟随鼠标指针移动
var img = document.querySelector('img') document.addEventListener('mousemove', function (e) { var x = e.pageX; var y = e.pageY; img.style.top = y+'px'; img.style.left = x+'px'; })原创 2022-03-14 20:59:51 · 1098 阅读 · 0 评论 -
Pink老师JavaScript课堂案例 - 简易留言板
创建节点和追加节点原创 2022-03-13 19:44:40 · 337 阅读 · 1 评论 -
Pink老师JavaScript课堂案例 - 新浪下拉菜单
用到了节点选择器原创 2022-03-13 18:56:48 · 1748 阅读 · 4 评论 -
Pink老师JavaScript课堂案例 - 点击选项卡切换内容
利用了排他思想原创 2022-03-13 16:33:51 · 1340 阅读 · 0 评论 -
Pink老师JavaScript课程作业 - 点击叉号关闭广告/悬浮窗
btn.onclick = function () { box.style.display = 'none'; }原创 2022-03-12 19:57:22 · 499 阅读 · 0 评论 -
Pink老师JavaScript课程作业 -点击按钮页面关灯和开灯
声明一个flag值:若值为1,点击后变黑;若值为0,点击后变白原创 2022-03-12 19:46:12 · 474 阅读 · 0 评论 -
Pink老师JavaScript课程作业 - 用户名输入框点击定位到搜索框和失焦
未点击时,提示文字为 邮箱/手机号/ID,且为灰色。点击输入框,边框变粉、提示文字清除,输入的文字为黑色。失焦时,若用户输入了字符,则保持原样;若用户未输入字符,则出现提示文字,且颜色为灰。原创 2022-03-12 19:21:41 · 112 阅读 · 2 评论 -
Pink老师JavaScript课程作业 - 简易数字计算器
每个功能都写一个函数 (add、minus、multiply、divide)在while(true)的前提下,用prompt()让用户选择加减乘除;再用switch 对应不同case下,运行不同的函数。原创 2022-03-11 15:09:39 · 769 阅读 · 2 评论 -
Pink老师JavaScript课程作业 - 写一个函数实现对数字数组的排序
方法:用到冒泡排序,比较相邻的元素,如果第一个比第二个大,就交换它们两个。原创 2022-03-11 12:53:51 · 790 阅读 · 0 评论 -
Pink老师Javascript课程作业 - 实现反转任意数组的函数
Pink老师JS教程的作业试答原创 2022-03-11 12:07:14 · 464 阅读 · 0 评论