javascript经典案例
敲
秃头男神
头秃了头秃了
展开
-
函数实操
函数原创 2020-10-08 21:25:42 · 528 阅读 · 0 评论 -
封装方法
封装方法与list.contains类似的功能方法,hasClass(ele,val);封装方法与list.remove类似的功能方法,removeClass(ele,val);封装方法与list.add()类似的功能方法,addClass(ele,val);原创 2020-10-21 11:38:41 · 131 阅读 · 0 评论 -
动态创建星星
注意:事先准备一张星星图引入js封装功能//09-动态创建星星//动态创建一个img节点//给节点添加src//设置img的随机宽度//设置img的随机位置 left和top//设置img的定位//将img添加到body中//点击当前img节点,删除该节点//以上操作需要开启定时器处理 <body bgcolor="#000000"> <!--<img src="img/star.gif"/> <img sr原创 2020-10-22 00:33:50 · 138 阅读 · 0 评论 -
日期对象常用方法
getFullYear 得到指定字符串中的哪一年 var time = new Date(2019,03,04,08,00,20); console.log(time.getFullYear());//2019getMonth 得到指定字符串中的哪一个月份月份从0开始,0表示一月 1表示2月 var time = new Date(2019,03,04,08,00,20); console.log(time.getMonth());//3getDate原创 2020-10-18 14:57:16 · 548 阅读 · 0 评论 -
DOM 操作属性
innerHTML获取元素内部的 HTML 结构 <div> <p> <span>hello</span> </p> </div> <script> var div =document.querySelector('div'); console.log(div.innerHTML);原创 2020-10-18 17:33:32 · 145 阅读 · 0 评论 -
数组应用
1、计算数组中所有偶数的和 奇数的和 偶数的个数 奇数的个数var arr = [3,42,5,43,8,54,87,98,56,9]; function fn(brr){//形参数 var evenSum = 0; var oddSum = 0; var evenCount = 0; var oddCount = 0; for (var i =原创 2020-10-13 21:55:54 · 184 阅读 · 2 评论 -
js调用顺序排列精灵图
思路分析:首先精灵图图片排列有规律核心思路:利用for循环修改精灵图的背景位置background-position让循环里的i索引号*44就是每个图片的Y坐标代码展示:效果显示:原创 2020-10-29 20:07:20 · 185 阅读 · 0 评论 -
javascript 递归函数案例操作
注意:return num + fn(num)类似于alert num+=i;if就是限定条件输出最终界限使用递归实现1-100的累加var sum = 0; function box(num){ num++; console.log(num);//遍历条件输出 sum += num; if(num === 100){ return;原创 2020-10-10 17:46:59 · 352 阅读 · 1 评论 -
javascript for循环练习
// 1. 求1-100之间所有数的平均值思路:需要一个 sum 和的变量 还需要一个平均值 average 变量var sum = 0; var average = 0; for (var i = 1; i <= 100; i++) { sum = sum + i; } average = sum / 100; console.log(average);// 2. 求1-100之间所有偶数和原创 2020-09-28 19:35:30 · 1707 阅读 · 0 评论 -
数组实操
创建个试试原创 2020-09-21 09:25:05 · 200 阅读 · 0 评论 -
京东显示密码
思路:点击眼睛按钮,把密码框类型改为文本框就可以看到里面的密码一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框,flag设置为0,如果是0就切换为密码框,flag设置为1代码显示:效果展示:...原创 2020-10-29 19:56:42 · 178 阅读 · 0 评论 -
函数的返回值案例
1.编写一个函数,功能计算任意数字的阶乘function getFac(num){ //求num的阶乘 var fac = 1; for (var i = 1; i <= num; i++) { fac *= i; } return fac; } var f = getFac(5);原创 2020-10-10 20:16:06 · 358 阅读 · 0 评论 -
ajax用户登录注册
首先在服务器环境下运行,访问php接口调用封装好的Ajax方法前端js操作代码:后端数据接口<?php/* 接口说明文档url: './data/user.php'type: post参数: user 用户账号 pass 用户密码 type 登录或注册 = login 登录 = add 注册 返回值示例: {"err":0,"msg":"登录成功"}*/// 允许任何来源 header(原创 2020-11-04 21:30:20 · 5839 阅读 · 1 评论 -
javascript 函数 强化练习
编写求和函数编写函数求数组的最大值,最小值编写函数输入个人简介封装函数加工数组,每一项加10输出根据用户输入的数值求0到该数值的累加和根据用户输入的两个数字求出两个数字之前所有整数的累加和提示用户输入账号和密码,实现登录成功效果,如果失败,再次提示...原创 2020-10-08 23:26:05 · 185 阅读 · 0 评论 -
javascript switch循环练习
基本语法:该知道饼咋吃的学生成绩分等级var num = prompt('请输入考试分数'); var sum =parseInt(num/10); switch (sum) { case 0: case 1: case 2: case 3: case 4: case 5: case 6:原创 2020-09-29 17:11:51 · 586 阅读 · 0 评论 -
封装方法⭐⭐⭐⭐⭐⭐
// 获取元素样式 function getStyle(dom,attr){ if (dom.currentStyle) { return dom.currentStyle[attr]; } else { return getComputedStyle(dom)[attr]; } } function animate(dom,options,callback){ // 遍历对象属性 for (var attr in optio.原创 2020-10-27 13:18:06 · 118 阅读 · 0 评论 -
Es6新增数组遍历
for of var arr = [43,6,5,78,8]; for(var ele of arr){ console.log(ele) } 迭代器 var arr = [43,6,5,78,8]; var keys = arr.keys(); for(var index of keys){ console.log(index); }遍历元素 var ar原创 2020-10-15 16:59:18 · 225 阅读 · 0 评论 -
DOM获取各种元素操作
获取一个元素通过 js 代码来获取页面中的标签 获取到以后我们就可以操作这些标签了geyElementById 是通过标签的id名称来获取标签的因为在一个页面中 id 是唯一的,所以获取到的就是一个元素 <div id="box"></div> <script> var box =document.getElementById('box'); console.log(box); </script原创 2020-10-18 20:24:04 · 486 阅读 · 0 评论 -
this指向问题⭐⭐⭐
函数的this指向是根据函数调用时所处的执行环境来确定的。this指向对象的情况有四种:1.使用new关键字时:this会绑定构造函数所创建的对象。2.使用 call, apply, bind方法调用:this 会绑定 call, apply 的第一个参数的引用对象。3.在某个上下文的对象中被调用:this绑定所处上下文对象。4.默认绑定:this 在 “严格模式下为”:undefined, “非严格模式下”绑定全局对象。...原创 2020-10-23 20:07:48 · 85 阅读 · 0 评论 -
拖拽
div的拖拽div在鼠标按下时跟随鼠标走div变化的是left和top属性⭐⭐⭐div要定位鼠标按下:onmousedown在哪按下:div上按下鼠标移动:onmousemmove,在哪移动:在文档上document鼠标抬起:onmouseup抬起做什么事?移除移动事件onmousemmove样式css <style type="text/css"> div{ width: 300px;原创 2020-10-24 18:37:00 · 115 阅读 · 0 评论 -
实时坐标显示
该方法只需要熟练通习offset 和screen 等原理即可????css <style type="text/css"> div{ width: 500px; height: 400px; background: red; } </style>????样式 <div id="box"原创 2020-10-22 22:00:39 · 283 阅读 · 0 评论 -
限制留言条条数
<input type="text" /><button>留言</button> <ul> <!--<li>11</li>--> </ul> <script type="text/javascript"> // 找到元素 var input = document.querySelect.原创 2020-10-22 12:10:28 · 202 阅读 · 0 评论 -
定时器
1、定时器简单应用 <style type="text/css"> #box{ width: 150px; height: 150px; background: red; border-radius: 50%; text-align: center;原创 2020-10-20 13:36:53 · 115 阅读 · 1 评论 -
js for循环创造小星星⭐⭐⭐
⭐⭐⭐这里有星星组成的各式各样的形状原创 2020-10-05 17:25:11 · 1491 阅读 · 4 评论 -
根据不同时间,页面显示不同图片,同时显示不同问候语
要求:如果过上午时间打开页面,显示上午好,同时显示上午的图片如果过中午时间打开页面,显示中午好,同时显示中午的图片如果过晚上时间打开页面,显示晚上好,同时显示晚上的图片思路分析:根据系统不同时间来判断,所以需要用到日期内置对象利用多分支语句来设置不同的图片需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性需要一个div对象,显示不同问候语,修改元素内容即可。代码展示:效果展示:...原创 2020-10-29 19:47:37 · 2069 阅读 · 0 评论 -
Dom练习必备⭐⭐⭐⭐⭐⭐⭐
页面布局效果,初始效果图添加新任务,鼠标移到任务上显示 编辑和删除按钮点击 编辑任务内容位置替换为输入框,自动获得焦点,失去焦点完成编辑,恢复原样点击 删除 把当前任务从待办任务列表删除勾选全部 所有任务为选中状态点击 处理 所有选中的任务从待办任务列表删除,并添加到已处理任务列表点击 删除 所有选中的任务从待办任务列表删除全选框和每个任务的选择框关联...原创 2020-11-02 20:54:38 · 1047 阅读 · 1 评论 -
完美拖拽
需求分析:1 在tz上按下鼠标,整个box可以拖拽2 在页面中移动鼠标,box跟着移动3 在页面上松开鼠标,box停止移动4 点击a1,div会从当前位置沿着原来的路线倒退回去技术点:如果想要沿原路径倒退,必须记住原来的途径的点...原创 2020-10-22 23:56:57 · 184 阅读 · 0 评论 -
表单属性设置
原创 2020-10-29 19:51:13 · 241 阅读 · 0 评论 -
动态生成表格
//获取元素//点击button//获取rol//获取col//创建table节点//根据rol插入行数//根据col插入列数//在最后一个列中插入一个a标签//点击a标签删除当前行 <input type="text" placeholder="输入行"/> <input type="text" placeholder="输入列"/> <button>插入表格</button> <script t原创 2020-10-22 00:42:33 · 172 阅读 · 0 评论 -
数组几种排序方式
怕不够用原创 2020-09-29 22:34:46 · 143 阅读 · 0 评论 -
javascript while和do while循环练习
while基本概念: 起码知道饼是咋做的// 1. while 循环语法结构 while 当…的时候// while (条件表达式) {// // 循环体 // }// 2. 执行思路 当条件表达式结果为true 则执行循环体 否则 退出循环// 3. 代码验证var num = 1; while (num <= 100) { console.log('好啊有'); num++; }原创 2020-09-28 22:37:12 · 1098 阅读 · 0 评论 -
京东搜索框
思路分析:要求:当鼠标点击文本框时,里面默认文字隐藏,当鼠标移开时,里面文字显示1、首先表单需要2个新事件,获得焦点onfocus 失去焦点onblur2、如果获得焦点,判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容3、如果失去焦点,判断表单内容是否为空,如果为空,则表单内容改为默认文字代码展示:效果展示:...原创 2020-10-29 20:49:47 · 424 阅读 · 0 评论 -
对象案例
u热度日用夜用原创 2020-09-30 08:41:59 · 514 阅读 · 0 评论 -
Math方法
random 生成一个0-1之间随机数,每次生成数字不一样。含0不含1,一定是0-1之间 var num = Math.random(); console.log(num);round 是将一个小数四舍五入变成一个整数。如果为负数,5会舍去 -4.5=-4 -4.51 =-5...原创 2020-10-17 18:47:02 · 126 阅读 · 0 评论 -
密码框提示错误信息案例
思路分析:首先判断的事件是表单失去焦点onblur如果输入正确则提示正确的信息颜色为绿色小图标变化如果输入不是6到16位,则提示错误信息颜色为红色小图标变化因为里面变化样式较多,我们采取className修改样式代码展示:效果展示:...原创 2020-10-29 20:56:08 · 638 阅读 · 0 评论 -
回调函数 ⭐⭐⭐
函数的参数可以 是任意的数据类型参数传递对象function fn(a){ //var a = {uname:"tom"}; console.log(a.uname);//把参数以对象的方式使用 } fn({uname:"tom"});参数传递一个数组function fn(a){ console.log(a[0]); } fn([4,3,5])原创 2020-10-15 01:04:41 · 248 阅读 · 0 评论 -
购物车 初始版
goodsList部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.原创 2020-11-17 21:26:18 · 206 阅读 · 0 评论 -
使用cookie用户登录页面及登录成功记录登录时间
需要本地运行,不能在编辑器上直接快捷键运行引用getCookie封装方法需要两张网页样式首页登录框样式css样式<style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; background-color: lightpink; } a{ font-size: 20px; color: red; } .login{ wi原创 2020-11-07 16:18:41 · 834 阅读 · 0 评论 -
倒计时案例
思路分析:核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒相减。用时间戳来做。用户输入时间总的毫秒数减去现在时间毫秒数,得到的就是剩余时间毫秒数把剩余时间总的毫秒转换为天、时、分、秒转换公式:d=parseInt(总秒数/60/60/24); 天数h=parseInt(总秒数/60/60%24); 小时m=parseInt(总秒数/60%60); 分钟s=parseInt(总秒数%60); 秒function countDow(ti...原创 2020-10-31 14:54:37 · 201 阅读 · 0 评论 -
轮播图 (运动)⭐⭐⭐
加个容器content 让滚动条拖动不影响按钮和选项卡滚动条瞬间归0 下一张content.scrollLeft = 0;上一张 Content.scrollLeft = 0 滚动条瞬间回到初始位置原创 2020-10-27 12:02:03 · 201 阅读 · 0 评论