![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 64
玩会手机就睡觉
这个作者很懒,什么都没留下…
展开
-
JS--用户名以及密码的检验
前言从同学的优秀作品中获得启发,照猫画虎自己写了一个demo供大家参考下。代码<div class="wrapper"> <h3>登录界面</h3> <div class="w1"> <input type="text" name='name' id='name' required placeholder="用户名" onblur="checkName()">原创 2021-06-16 22:44:00 · 1152 阅读 · 1 评论 -
JS--input密码框数字显示与隐藏
前言这个是js里的一个简单应用,我们只需要搞清楚input标签的属性,详情见下图:与我们这次有关联的是password(这个是隐藏的)和text(这个是显示)<form action="#"> <input type="password" placeholder="请输入您的密码"> <img src="../img/close-eye.png" alt=""> </form>*{ m原创 2021-06-15 09:00:07 · 992 阅读 · 1 评论 -
JS特效--字体逐渐浮现效果
前言这个特效是我看同学代码然后学会的一种JS特效,感觉还挺好玩的就跟大家分享一下,随便做一下记录!!正片开始<h1></h1>h1{ position: absolute; top: 150px; left: 620px; line-height: 70px; text-shadow: 1px 1px rgba(197, 223, 248,0.8),原创 2021-06-14 22:37:04 · 1657 阅读 · 3 评论 -
cookie、session、localStorage和sessionStorage的区分
前言首先我按照它们存储数据位置不同划分为cookie+session,localstorage+sessionstorage俩大类,划分原因是cookie保存在浏览器端,session保存在服务器端,这两者都不是存储在本地,而后者直接保存在客户端本地了,这大大减轻了服务器端的负担,同时,也加快了访问数据的速度。先讲cookie与session存储位置cookie保存在浏览器端,session保存在服务器端机制cookie:如果不设置过期时间,cookie保存在内存中,生命周期随浏览器的关闭原创 2021-06-08 19:52:17 · 374 阅读 · 2 评论 -
JS--Cookie
前言之前学的是本地存储,然后了解到还有cookie这种存储方法,经过了解,这种方法对后面的学习有很大作用,希望大家能跟我一起开肝,羌胡!!补充一点的就是,ccokie的操作分为服务器端和客户端,这里我没有自己的服务器,所以只讲客户端的!!正题简介cookie是由服务器发送给客户端(浏览器)的小量信息。平时上网时都是使用无状态的HTTP协议传输出数据,这意味着客户端与服务端在数据传送完成后就会中断连接。这时我们就需要一个一直保持会话连接的机制。在session出现前,cookie就完全充当了这种角原创 2021-06-08 10:32:32 · 237 阅读 · 0 评论 -
JS--本地存储
基础认知localstorage可以说是对cookie的优化,使用它可以方便在客户端存储数据,并且不会随着HTTP传输,说到这里就要跟sessionStorage 做一下区分!!localStorage 和 sessionStorage 属性都允许在浏览器中存储 key/value 对的数据。但是localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。不过他们的一些方法是相似的!!使用原创 2021-06-07 20:36:40 · 208 阅读 · 0 评论 -
对接口数据的获取--AJAX
前言在做项目的时候,前端需要通过接口从后台那里得到需要使用且不定期更换的一些资源,而如何获取就是至关重要的一步,一般都是通过AJAX来进行这一个操作!!代码如果自己在做练习,只需要获取一两次的可以用下面这个简单点的var xmlhttp;if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); /*一般情况下,我们会使用XMLHttpRequest 来发送 HTTP 请求以实现网站和服务器之间的数据交换。*/} else {原创 2021-06-07 10:02:26 · 526 阅读 · 2 评论 -
JS--3d轮播图
前言这个是我要介绍的第三种轮播图—3d轮播图,这种轮播图在一些app里面会用得比较多,视觉效果很不错!!代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易云音乐轮播图实现</title> <link rel="stylesheet" href="./css/iconfont.css"> <link r原创 2021-06-07 09:21:31 · 335 阅读 · 0 评论 -
js--层级轮播图
前言这个是继我前面讲的水平轮播图后的层级轮播图,这个会更加实用以及没有bug!代码<div class="smallbox"> <div class="slide"> <ul class="ad"> <li> <a href="#"><img src="./img/slide1.jpg" class="slide1">&原创 2021-06-07 09:07:05 · 254 阅读 · 0 评论 -
CSS轮播图---水平轮播图
前言我到现在用过的轮播图就三种,分别是水平轮播图,层级轮播图以及3d轮播图,今天介绍的就是第一种水平轮播图,这个方法存在一定的bug(放缩时候会出现问题!!)代码<div class="picture"> <ul> <li> <a href="#"> <img src="./image/1.png" alt="">原创 2021-06-06 22:14:08 · 419 阅读 · 0 评论 -
JS---对伪元素的处理
前言在之前的文章里我需要对伪元素的样式进行修改,这个时候我发现我这一块的知识是一片空白,然后我上网去查阅相关资料然后做了以下总结,如有错误还请大家多多指正!!正题js获取(这里指的是对伪元素属性与属性值的获取,不像那些querySelector()获取元素)这里第一步我们要学会获取伪元素!!*{ padding: 0; margin: 0; } body{ display: flex;原创 2021-05-28 11:53:44 · 1523 阅读 · 0 评论 -
CSS--创意产品卡
前言这个参考自大佬的文章原文然后做了点改进,多了些js代码<div class="card"> <div class="imgb"> <img src="./90.png" alt=""> </div> <div class="con"> <h2>JORDEN</h2> <div class原创 2021-05-28 11:02:23 · 91 阅读 · 0 评论 -
JS--与scroll相关的方法
前言因为之前的文章里的js有用到scroll的一些方法以及我之前学得有点快,所以我就专门写一篇文章方便自己后期的温故知新!!!基本了解首先scroll的方法大致分为两个对象:window对象和element对象,我们先看第一个再看第二个window对象下的scrollscrollX(等价于pageXOffset,兼容性好一点)window.scrollX这个方法返回文档/页面水平方向滚动的像素值。(文档被剪去的宽度)用法:var x = window.scrollX;// 如果 scr原创 2021-05-27 19:51:31 · 1408 阅读 · 0 评论