GAARA

新建modules文件夹和文件夹下的hello.js和main.js文件。在dist文件下创建inde.html,并引用result.js。dist文件夹下的result.js文件。

要求拖动下面的进度条来选定角度,上面的黄色框同时旋转到该角度在这里插入图片描述思路需要将黄色方块的transform属性在script中进行动态绑定将其角度设置为进度条的角度

1.项目需求翻翻乐游戏:在若干张显示背面的图片中,连续点击其中两张,若翻过来发现是一样的,那么会固定住,不会再回翻,若翻过来发现是不一样的,那么两张图片会自动会回翻游戏结束:所有的图片配对成功时则视为游戏结束2.核心思路玩家点击鼠标左键可以翻牌==>点击div实现3d翻转玩家连续点击两张牌两张牌一样==>取消这两个div的翻转两张牌不一样==>自动再次翻转回去结束游戏==>所有div都没有背景图

文章目录零.transform的用法1.属性值translate:转换2.属性值scale:缩放3,属性值rotate:旋转4.属性值skew:倾斜一.示例:点击翻转扑克牌正反面1. 注意事项2.完整代码3.知识点3.1.transition属性用于设置元素的过渡效果3.2.div:hover #one还是div #one:hover?二.改进:在js中调用元素的transform属性1.css样式不变,除了hover部分2..完整代码3.图片资源back.pngfront

一.实现思路1.2048的逻辑2.移动操作的过程中会有三种情况二.代码部分:分为初始化部分和移动部分1.初始化部分1.1.生成第一个方块:1.2.生成第二个方块:2.移动过程部分:三.实现代码1.HTML部分2.CSS部分3.JS部分3.1.game对象的属性3.2.game对象的start方法3.3.game对象的randomNum方法3.4.game对象的dataView方法3.5.game对象的isGameOver方法3.6.game对象中设置移动的方法(以左移动为例

文章目录一.常见两列布局(左栏固定宽度,右栏自适应)写法一:左边设置固定宽度并浮动,右边自适应写法二:flex布局二.常见三列布局(部分固定宽度,部分自适应)1.浮动布局;两边固定宽度并左右浮动，中间自适应2.所有子元素都左浮动,且两边定宽，中间自适应3.行内块级显示--给每一块元素设置为行内块级元素4.父元素：display:flex,子元素全部flex:1;为flex：1，1，0%。自适应5.父元素flex布局+左右定宽+中间元素flex:1;6.绝对定位一.常见两列布局(左栏固定

页面结构网页由顶部top(包含logo和搜索框)+头部header(包含导航栏)+轮拨图banner+主体内容main+市场项目section+底部footer(包含版权信息等)使用position子绝父相进行定位,注意到只需要一个最外面的父元素设置绝对定位,其若干层子元素都可以设置相对定位使用rem相对单位代替px,在VSCode应用商店中下载cssrem插件

页面由头部header+轮拨图banner+选项卡片section+案例case+客户client+关于我们&新闻aboutUs&news+底部footer组成头部底部等等用到了h5新增标签使用float浮动进行盒模型的水平布局,使用内外边距padding和margin进行上下左右间距的拉开在margin:top塌陷的地方是通过改为设置padding:top再将height减去相应像素来实现的网页在浏览器中的居中显示是通过设置html的宽度100%,body设置一个固定宽度然后margin:0 au

文章目录1.UI原型图2.完整代码3.最终效果4.遇到的问题1.UI原型图在这里插入图片描述2.完整代码

零.准备和说明1.最终页面效果2.资源地址一.网页布局1.网页结构分析2.其他准备3.完整代码index.htmlcss/index.scss4.效果5.知识点5.1.伪类选择器:after 选择器,:before和content属性示例counter-increment函数5.2.z-index属性示例:图片设置 z-index: -1, 会显示在文字之后5.3.动画animate和关键帧@keyframe示例animation的属性值:动画执行时间 延迟时间 执行关键

给.panel元素的四边上四个折线框,是通过一个个宽高10px的小div只显示两侧边框实现的上面两个可以直接给.panel添加伪元素选择器::before和::after下面两个可以再给.panel套一个div.panel-footer,同样给这个元素添加两个伪元素选择器设置定位:子绝父相

知识点z-index:当前css盒子放在其他盒子之上或之下css3的filter用法元素的拖拽核心代码:left值=eveDown.clientX-eveMove.offsetX(减去div的资深宽高可以让鼠标保持在元素正中间显示)-cursor的属性值:pointer（小手）、auto（I）、default（箭头）、crosshair（十字交叉）、move（移动）、wait（转圈）、help（？）

文章目录1.检测用户名是否存在代码user.htmluser.php效果2.同步百度的搜索栏1.检测用户名是否存在代码打开服务器,并在阿帕奇服务器的www文件夹下创建如下文件user.html 请输入用户名: 点击 var span = documen

需求静态网页常有header,footer这些各个页面都存在的公共部分,这时候不用在每个网页都写一遍header和footer,而是考虑把他们提取出来,然后导入即可解决方法使用jQuery的load()方法,比如:$(".header").load("../module/header.html")注意事项因为一个网页只能有一个html和body所以公共部分的html文件只能有div,不能包含body和html示例:把header导入到首页index.html中index.html

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全

思路:使用正则表达式代码const str = "heLloWolrdeeeee";const key = 'l';(() => { const matchReg = new RegExp(`${key}`, 'ig');//正则目标:/l/ig const matchRes = str.match(matchReg) || [];//结果数组:[l,L,l]; console.log(matchRes.length);//3})()

要求1.勾选全选复选框,商品列表的复选框也跟着被选中2.每个商品复选框也有单独的点击事件,当每一个商品复选框都被选中时,全选复选框也自动被选中

1.什么是jsonp2.为什么要跨域3.[面试题]jsonp跨域的原理是什么?4,跨域例子代码结果5.接口名必须前后端名称一样例子结果6.jsonp的缺点6.1.产生大量无用的script标签6.2.只能GET请求,不能POST,PUT,DELETE7.jsonp跨域案例:同步百度的搜索栏8.jQuery的jsonp跨域例子结果

一.取出json文件中数据目标代码使用ajax发送GET请求代码结果二.json-server的下载和使用1.json-server:基于一个json文件就可以创建很多个后端的模拟接口2.下载命令3.开启服务4.结果:分析:地址栏输入 http://localhost:3000的结果:地址栏输入 http://localhost:3000/data的结果:[node的退出]如何退出集成终端中的node.js?

思路设置一个单独的选中框,通过在animate中设置其left值,造成其从当前选项往目标选项移动的动画效果,设置其层级,确保其处于选项内容的下方底部内容随顶部选项卡改变

思路鼠标移入:当前所在li对应的宽度增加,其表兄弟宽度减小鼠标移出:宽度恢复在animate()动画前加stop(),是为了防止鼠标快速移动时,animate动画要全部执行,造成不好的类似幻灯片的效果

思路1.ul>li前的"+“,”-"号使用伪元素选择器::before{}添加,如在正式网页中,可以用iconfont图标,达到更好的视觉效果2.点击展开和折叠不用display:block和none,而是用slideToggle(),效果更好3.为ul>li绑定点击事件后,点击一个li就让其子元素ol展开和折叠,若只允许展开一个li,则让当前li的所有表兄弟都向上折叠即可

思路鼠标移入 悬停信息显示鼠标移出 悬停信息隐藏鼠标移动 悬停信息随鼠标移动代码 div { margin: 100px; width: 150px; height: 50px; background: pink; /*穿透*/ /* pointer-events: none; */ } p { position: relative;

思路在鼠标点击事件中,为当前鼠标选中的li添加active类(含有选中的样式),获取此li的索引利用此索引,显示对应的第index个底部box li内容

1:在浏览器中找到当前get请求代码JS: let xhr = new XMLHttpRequest(); xhr.open('get', 'get.php'); xhr.send();PHP:结果F12>网络(Network),找到get.php点开在响应(Response)中可以看到PHP文件的内容2.往指定文件写入新内容代码HTML:

1.用POST请求给后端传递数据代码JS:var xhr = new XMLHttpRequest();xhr.open("POST", "post.php", true);//application/x-www-form-urlencoded:设置传递参数时使用的编码格式(默认)xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');var data = 'name=zs&age=18'; //

1.自定义ajax请求方法要求代码输入结果2.为请求添加参数思路代码结果3.友好等待界面思路代码结果4.根据不同的http返回代码进行不同的响应思路代码5.ajax传输JSON数据思路知识点:eval()函数完整代码结果6.自定义一个ajax类代码结果

#### 1.商品详情页```html Document #cont { width: 1000px; border: solid 1px black; overflow: hidden; margin: 0 au

主要思路:若图片索引小于列数:     正常输出,    &nbsp并用一个空数组记录第一行每张图片的高度若图片索引大于列数:     先找出高度数组的最小值,并在最短图片的下方添加图片     更新其高度(此时新的最短图片出现了)     重复以上步骤.

需求1.实现鼠标移入移出时左右键的显示和隐藏2.点击左键实现切换到上一张,点击右键切换下一张3.点击序号12345的小图标可以切换到对应的第几张图片,并且当前图片对应的序号被选中(变颜色)4.没有鼠标点击时可以实现自动播放......

需求封装一个类,可以动态地创建节点,标签节点该有的样式和属性它都有,可以追加到页面中要点运用面向对象的思想,把需求分为四个部分1,节点创建2.设置样式3.设置属性4.节点追加把它们作为类方法进行定义即可代码实现<div id="app"> <!-- <img src="../../Pictures/IMG114413.jpg" alt=""> --></div><script> class CreateTa

需求在背景中任意点击鼠标,对应的纵坐标位置有烟花上升,到达一定高度后炸开,烟花颜色完全随机

思路 先计算鼠标的移动距离=移动的坐标-按下的坐标 再计算login最终处于的位置=鼠标的移动距离+login的初始坐标 最后给login的最终位置设置范围

封装一个抽象的,适配性更高的运动函数封装一个运动函数,让其适配不止一种运动情况,不仅仅可以满足元素的高度发生改变这样的一种情况,让以元素的其他属性(宽高背景色透明度等等)的改变为基础的运动事件都可以用得上.........

首先要封装一个产生随机数的函数然后分别封装产生宽高,背景色,圆弧的函数,调用上面的函数(面向对象写法)在鼠标点击事件中进行节点创建,添加样式,追加到body

透明度的目标值:target透明度的当前值:alpna若target<alpna则alpha--若target>alpna则alpha++,并把值赋给opacity若target<alpna则alpha--,并把值赋给opacity若target==alpna则清除定时器

思路在定时器中让小球的横纵坐标实时变化,把横纵坐标赋给div的left和top要点把圆上任一点(x,y)的等式关系表示出来就是x=r*sin(a/180*pi)y=r*cos(a/180*pi),其中a是角度,如30°

思路先实现一个拖拽,把拖拽过程中移动产生的一个个坐标添加到数组中,在a标签的点击事件中设置一个定时器,遍历数组中的坐标赋给拖拽div

1.1.获取节点1.2.设置初始变量x,y,z,默认值为false2.给user绑定失去焦点事件 获取user文本内容 给user制定正则表达式 若正则表达式.test(文本内容)结果为真,给span输出"用户名合格",x=true, 结果为假时类推3.给pass绑定失去焦点事件 获取pass文本内容 若 密码长度不在6-20之间,则输出:密码长度不正确,y=false 否则 验证密码强弱等级 y=true 初始化变量a,b,c分别为数字,字母,特殊符号的正则结果(1或

文章目录1.检测邮编格式要求正则代码2.检测文件名格式要求正则代码3.去除空格4.检测邮箱5.检测手机号6.检测身份证7.检测中文字符8.检测用户名9.替换手机号码10.替换敏感字1.检测邮编格式要求邮编是正好六位数的数字正则代码var youbian = '114514';var reg1 = /^\d{6}$/g;//若不加上^和$,则多于6个数字也会判断为true//==>前后加上^和%可以起到指定判断字符长度的效果console.log(reg1.test(youbian))