js交互设计
关注
分享
扫一扫
夹心776655
这个作者很懒，什么都没留下…
展开
-
【JQuery】实现轮播图
代码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图1</title> <style> * { .原创 2021-01-18 21:43:09 · 179 阅读 · 0 评论 -
【Javascript】入门之面向对象的继承
面向对象的继承面向对象继承主要有四种方式1.原型链继承2.对象冒充继承3.组合继承4.寄生式组合继承1.原型链继承原型链: 当每个函数或对象被创建出来的时候, 所形成的链表关系就是原型链实现继承和查找继承：父类构造函数的所有属性和方法给到子类构造函数查找：创建的对象查找属性和方法的时候, 先在对象自身去找, 找不到, 找子类构造函数的原型对象(父类构造函数的实例化对象), 找到了就返回，找不到再找父类构造函数的实例化对象，找不到, 就找object,找不到返回undefined, 找原创 2020-12-25 15:52:38 · 125 阅读 · 2 评论 -
【CSS3 + JQuery】实现手风琴效果
描述: 实现手风琴效果1.简易版（纯JQ,不带动画）划上每一个标题, 让其紧跟的图片宽度变成295px,其余图片宽度变成0<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手原创 2020-12-23 10:58:26 · 234 阅读 · 0 评论 -
【CSS3+JQuery】实现万花筒旋转效果
描述:使用css3动画使四个盒子旋转,每隔500ms 随机一个div 改变成随机背景色 rgb(255, 255, 255)技术点1.CSS3旋转2.随机改变颜色代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale原创 2020-12-23 10:37:22 · 340 阅读 · 0 评论 -
【JQuery】入门之操作样式
描述:1. 点击显示div样式按钮 让右侧内容块显示出来2. 划上每一个小方块 进行对应样式的设置3. 点击确定 隐藏右侧内容块4. 点击取消 让div变成初始样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2020-12-22 12:33:09 · 104 阅读 · 0 评论 -
【Javascript】入门之输入框的编辑保存
描述: 操作内容1. 点击编辑 让输入框和保存取消按钮显示 让标签的内容赋值给输入框2. 点击保存 让输入框的内容赋值给标签 让输入框和保存取消按钮隐藏3. 点击取消 让输入框和保存取消按钮隐藏1.原生Javascript实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w原创 2020-12-21 17:57:49 · 1624 阅读 · 0 评论 -
【Javascript】进阶之无缝轮播图在项目中的应用
无缝轮播图在项目中的应用(利用Ajax获取数据)代码实现1.HTML布局 <!-- banner --> <div id="banner" class="fl"> <!-- banner list --> <ul class="bannerlist"> <!-- <li> <img src="原创 2020-12-20 16:18:43 · 216 阅读 · 0 评论 -
【Javascript】进阶之实现多页面渲染、分页效果和筛选功能
描述: 实现多页面渲染课程和分页效果的实现代码实现1.HTML布局部分: <!-- course list --> <ul class = "courselist clearfix" id = "courselist"> <!-- <li> <a class="img"> <img src="原创 2020-12-19 23:14:25 · 545 阅读 · 1 评论 -
【Javascript】进阶之实现评论分页与发表评论功能
描述：实现评论分页与发表评论1.评论分页，通过上一页、下一页和输入页数跳转2.发表评论是需要先判断是否登录，登录后显示个人中心和退出，再发表评论，如果选择匿名评论，则显示匿名代码实现HTML1.样式部分： <div class="comment fl"> <h3>歌曲评价(<b id="commentlength"></b>)</h3> <u原创 2020-12-19 10:50:46 · 1358 阅读 · 1 评论 -
【Javascript】进阶之video在项目中的实现
功能1.点击歌曲，切换到对应视频2.选中的歌曲黑色背景橘黄颜色，且划上有黑色背景3.点击白天模式，切换成白天模式样式4.倍速功能代码实现1.HTML <!-- video part --> <div class="uppanel"> <div class="container clearfix"> <h3 class="title" id="title">01 阿冗-你的原创 2020-12-19 10:31:18 · 565 阅读 · 1 评论 -
【Javascript】进阶之利用touch.js让熊猫旋转
描述: 按住图片进行旋转 让图片跟随鼠标进行对应方向的旋转touch.jstouch.on('div', 'swipe tap', 'p,li', function(ev){ ev.startRotate(); // 开始旋转 console.log(ev); // CustomEvent 事件对象 console.log(ev.originEvent); // 原生事件对象 console.log(ev.type); // 事件类型 console.log(e原创 2020-12-18 17:37:52 · 340 阅读 · 1 评论 -
【Javascript】进阶之实现移动端无缝轮播
描述:移动端实现无缝轮播代码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js原创 2020-12-18 15:39:22 · 172 阅读 · 0 评论 -
【Javascript】进阶之音频与视频
音频Audio<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!原创 2020-12-17 01:40:33 · 316 阅读 · 0 评论 -
【Javascript】入门之验证注册信息
描述:html <main class="clearfix"> <div class="leftpanel fl"> <form action="#" id = "registerform"> <div> <span>手机: </span> <input type="text"原创 2020-12-16 10:07:04 · 338 阅读 · 0 评论 -
【Javascript】进阶之localStorage在登录注册中的应用
描述1. 进入首页, 判断本地缓存的手机号和密码是否都存在, 如果都存在显示已经登录和显示个人中心; 如果其中有一项不存在则状态为未登录, 显示登录注册按钮。2. 注册的时候, 在缓存中有一个数组 ，存储当前创建的账户信息3. 登录的时候,获取数组,验证对象是否在数组中存在localStorage基本语法 // localStorage: 缓存数据 json数据 console.log(localStorage); // 存储数据: 1. localSt原创 2020-12-16 07:03:27 · 993 阅读 · 1 评论 -
【Javascript】进阶之选项卡在项目中的运用(二)
描述: 鼠标移入不同板块, 显示对应板块的内容, 不移入的时候为默认板块, 所有数据存储在JSON文件中, 通过AJAX获取代码实例HTML <!-- online course --> <div class="onlinecourse clearfix"> <!-- title --> <h3 class="fl">精品网课</h3>原创 2020-12-13 19:47:34 · 139 阅读 · 1 评论 -
【Javascript】进阶之选项卡在项目中的运用(一)
描述: 点击对应文字描述, 切换到对应的图片(AJAX信息交互方式)代码实现HTML <!-- hot live --> <div class="hotlive clearfix"> <!-- title --> <h3 class="fl">热门直播</h3> <div class="more fr">原创 2020-12-13 10:44:55 · 165 阅读 · 1 评论 -
【Javacript】入门之正则匹配密码和邮箱
描述: 1.正则匹配密码6-18密码:初级: 纯数字和纯字母中级: 数字和字母的组合 , 首位必须是字母高级: 数字和字母和特殊符号的组合, 首位是字母代码实现 // 1.设置密码 var str = 'qwerty'; // 2.初级: 纯数字或者纯字母 var reg = /^\d{6,18}$|^[a-zA-Z]{6,18}$/; console.log(reg.test(str)); //原创 2020-12-10 16:47:31 · 244 阅读 · 1 评论 -
【Javascript】入门之面向对象创建实例
描述: 运用面向对象的方法创建飞机对象实例代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面向对象创建飞机</title> <style>原创 2020-12-09 14:41:27 · 172 阅读 · 0 评论 -
【Javascript】入门之实现轮播图效果(无缝轮播/箭头切换/圆点切换)
描述:1. 布局, 有几张图就有几个小圆点2. 在页面中，每隔5s图片切换到下一章3. 点击左箭头, 让图片依次切换 4–3--2–1--44. 点击右箭头, 让图片依次切换 1–2--3–4--15. 点击小圆点，图片切换到对应的6. 鼠标划上div，清除定时器7. 划下div, 定时器重新开启代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-12-08 20:23:12 · 3698 阅读 · 1 评论 -
【Javascript】入门之元素拖拽
描述: 实现元素拖拽功能代码实现:// 拖拽元素函数function drag(ele) { // ele: 元素 // 按下div ele.onmousedown = function (evs) { // 按下的时候 求鼠标距离元素左侧的距离 鼠标当前距离页面左侧 - 元素到页面左侧的距 var ev = window.event || evs; var ml = ev.clientX - ele.offsetLeft;原创 2020-12-08 13:11:22 · 113 阅读 · 0 评论 -
【Javascript】入门之列表的增删改
描述: 判断目标源/触发源target的内容是删除还是修改。如果是修改, 弹出一个带有输入框的对话框, 点击确定修改内容; 如果是删除, 找到父元素li，删除整行; 点击添加， 弹出带有输入框的对话框， 当输入框没有内容或者点击取消的时候 不添加节点。如果输入框中有内容， 创建一个li, 添加到ul中。代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-12-08 13:07:41 · 565 阅读 · 1 评论 -
【Javascript】入门之模拟单选框
描述: 点击每一个li 将li的内容赋值给 div 给当前点击的li加上背景色, 点击空白部分隐藏代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟单选框<原创 2020-12-08 12:58:29 · 332 阅读 · 0 评论 -
【Javascript】入门之右键模拟菜单
描述：列表项随着鼠标右键的位置移动, 类似于模拟菜单代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>右键模拟菜单</title> <style原创 2020-12-07 15:32:39 · 258 阅读 · 0 评论 -
【Javascript】入门之实现盒子水平垂直居中
描述: 用JS动态实现盒子水平垂直居中(考虑scroll和resize的情况)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-12-07 11:00:35 · 907 阅读 · 0 评论 -
【Javascript】入门之放大镜功能的实现
描述：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反如何设计页面元素技术要点：事件捕捉和定位难点：计算涉及技术onmouseover：当鼠标指针移动到指定的对象上时发生onmouseout：鼠标指针移出指定对象时发生onmousemove：鼠标指针移动时发生offsetLeft | offsetTop | offsetWidth | offsetHeightevent.clientX | event原创 2020-12-06 20:18:31 · 202 阅读 · 0 评论 -
【Javascript】入门之实现懒加载
懒加载: 页面滚动到哪里 图片就显示到哪里技术实现：img必须有宽高的占位img的地址写在一个自定义属性上页面滚动到哪里图片就显示到哪里 图片进入页面的时候显示出来页面滚动距离 + 屏幕的可视高度 >= 元素距离页面顶部的距离进入页面的时候，需要先显示第一屏屏幕尺寸发生改变的时候 显示当前屏幕的图片代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2020-12-05 09:57:34 · 193 阅读 · 0 评论 -
【Javascript】案例之回到顶部
描述: 页面滑到大于500px的位置出现回到顶部按钮, 点击回到顶部按钮, 页面回到顶部代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>回到顶部</title>原创 2020-12-04 16:39:02 · 121 阅读 · 0 评论 -
【Javascript】入门之操作表单元素
1. 表单操作 <form action=""> 姓名: <input type="text" name="user" value="1234"><br> 密码: <input type="text" name="pass"><br> 性别: <input type="radio" name="sex" id="" checked value="male">男<input type原创 2020-12-04 12:32:34 · 153 阅读 · 0 评论 -
【Javascript】入门之操作表格属性(添加，删除，全选与反选)
描述: 点击添加, 输入框的值添加到下方表格中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格添加</title> <style>原创 2020-12-03 16:24:11 · 709 阅读 · 0 评论 -
【Javascript】入门之图片排序
描述: 点击从大到小, 图片按照从大到小的顺序来排序，按钮文字为从小到大; 点击从小到大, 图片按照从小到大的顺序来排序, 按钮文字变为从大到小；点击随机排序, 图片随机排序 并每次生成不重复随机数(下标)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2020-12-02 21:58:51 · 1867 阅读 · 0 评论 -
【Javascript】之字符串对象
String概念string: 字符串 被成对的单双引号包裹的就是字符串创建字面量创建: var 变量 = ‘字符’;强制转换: var 变量 = String(数据);构造函数/实例创建: var 变量 = new String(数据);区别: 1.2创建的是字符串类型 3创建的是对象类型var str = '123456a';console.log(str);console.log(typeof str); // stringvar str1 = String(true原创 2020-12-02 05:54:41 · 215 阅读 · 0 评论 -
【Javascript】入门之验证码功能
描述：发送验证码 点击发送验证码 生成验证码 按钮背景色变灰开始倒计时 灰色点击没有任何作用(disabled true(不能用) false(可用)) ，当倒计时到了0的时候，按钮变红，可以点击1.两个按钮的显示隐藏写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d原创 2020-12-01 13:10:48 · 186 阅读 · 0 评论 -
【Javascript】入门之实现图片切换与轮播
描述: 点击右箭头向后切换图片,切换到第四张返回第一张 1--2---3---4-(判断)-1 点击左箭头向前切换图片, 切换到第一张返回第四张 4--3--2--1-(判断)-4 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...原创 2020-11-26 10:06:14 · 973 阅读 · 0 评论 -
【Javascript】入门之实现简易计算
描述: 输入两个数, 实现+ - * / % 5种操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Switch</title></head>原创 2020-11-25 13:02:25 · 196 阅读 · 0 评论 -
【Javascript】入门之QQ验证(嵌套三目运算符)
题目描述:请输入QQ号, 判断 1、有没有输入 2、输入的是不是数字 3、不能有0在前面 4、不能是小数 5、输入的数字必须在5位以上、11位以下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...原创 2020-11-25 10:22:55 · 384 阅读 · 0 评论 -
【Javascript】入门之切换样式
代码实现功能：点击不同的功能，上方的盒子显示对应的改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>切换样式</title> <style>..原创 2020-11-23 21:55:43 · 338 阅读 · 0 评论 -
【Javascript】入门之点击多个盒子展开收起案例
描述:点击每一个div,如果当前高是100px变成300如果高是300px变成100px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击多个展开收起<...原创 2020-11-26 13:44:24 · 729 阅读 · 0 评论 -
【Javascript】入门之选项卡
描述：点击每一个按钮,将内容切换成对应的,按钮背景色改变字体也改变步骤： 1. 布局: 一个父盒子套入3个按钮和3个内容盒 布局中注意三个盒子需要叠加在一起, 这里需要用到绝对定位 只显示点击盒子的内容, 设置激动状态的class = active, 并且使不需要的隐藏(display: none) 2.JS部分 获取元素(box, div, btn), 在有父元素(box)的情况下用父元素来获取 给每一个按钮添加点...原创 2020-11-26 15:41:59 · 397 阅读 · 0 评论 -
【Javascript】入门之checkbox的全选、反选和不选
如果选中, checked属性为true, 反之为false<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复选框选择</title></head&g...原创 2020-11-26 19:25:20 · 556 阅读 · 0 评论