- 博客(35)
- 收藏
- 关注
RSS订阅原创 自学web前端练手——jq动画之元素的显示与隐藏
主要运用了jq的hide()和show()效果如下：初始界面：点击显示按钮后设置的div一个个按顺序显示出来：显示完毕效果：点击隐藏按钮后已经显示的div一个个倒序隐藏：隐藏完毕效果与初始效果一样：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
2020-04-05 15:49:10
278
原创 自学web前端练手——jq的图片切换
之前写过js的图片切换（https://blog.csdn.net/lvshaoshishang/article/details/104717559），这几天开始学jq，所以又用jq写了一版图片切换。不同的是，js我写的是靠点击按钮才能实现图片切换，jq只需要将鼠标移动到相对应的数字编号上（无需点击）就能实现图片切换。效果如下：代码如下：<!DOCTYPE html>&l...
2020-04-02 20:24:36
500
原创 自学web前端练手——JQuery实现品牌列表的显示与隐藏
主要运用了JQuery的选择器来实现（基本过滤选择器、内容过滤选择器、可见度过滤选择器）。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>...
2020-04-01 00:40:35
815
原创 自学web前端练手——jQuery的选项卡实现
jq的代码量的确比js要少，目前还不熟练还在摸索中_(:з」∠)_效果如下：点击选项卡切换效果时可看到代码自动改变。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <...
2020-03-31 17:03:41
223
原创 自学web前端练手——用Bootstrap实现简易版响应式页面
主要采用了Bootstrap的栅格系统、导航条、按钮组、巨幕、列表组，今晚刚学这个也太好用了吧！！不用自己写代码只需要改成中文内容就行了O(∩_∩)O哈哈~效果如下：pc端显示效果如下：调用F12点击切换设备工具栏后显示效果如下：（我自己用手机打开该页面测试过，就是下面这个效果）代码如下：<!DOCTYPE html><html lang="en">&l...
2020-03-28 21:19:38
752
原创 自学web前端练手——HTML5的canvas实现网页画图（html5+css+js）
html5的canvas实现网页画图步骤：①定义画布（html5）②设置画布样式（CSS）③js准备绘图的上下文环境④js绘图效果如下：点击按钮可以改变画笔颜色和画笔粗细大小。随便画的_(:з」∠)_不要嫌弃我手抖代码如下：.html<!DOCTYPE html><html lang="en"><head> <meta charset...
2020-03-28 16:44:21
3908
1
原创 自学web前端练手——简易版成绩统计页面（html+css+js）
遇到的问题：①刚开始innerHTML一直显示不出来，然后发现是犯了之前跟“js的随机验证码和验证”这篇博文一模一样的错误_(:з」∠)_var number=f1.getElementsByTagName(‘input’);//获取到的时一组元素，number[i]时其中的一个文本框元素，它的值得通过value属性来获取，number[i].value才是某个文本框元素的值②表单提交后...
2020-03-27 12:01:44
3427
翻译 自学web前端练手——魔方实现（css3+html+js）
以css3的平移、旋转、动画为主体构成。效果如下：（发现不能传小视频就只能粗略截几张图了）有九宫格飞出去飞回来的效果（一边旋转一边飞），但只设置飞一次，飞回来后只旋转魔方，但我发现有一个面永远转不到他不知道为啥_(:з」∠)_代码如下：<!DOCTYPE html><html lang="en"><head> <meta charse...
2020-03-23 23:11:39
2096
1
原创 自学web前端练手——js的随机验证码和验证
就是平时登录的时候要验证的验证码刷新和验证功能简易版。遇到的问题：之前一直想用innerHTML来获取文本框内容获取不到一直失败，调试了很久（一直是更换getElementById或getElementsTagName等之类）都还是失败，最后百度才发现是要用value来获取文本框内容，innerHTML是获取文本内容，我太菜了_(:з」∠)_document.getElementById(“...
2020-03-23 20:31:16
190
原创 自学web前端练手——js的cookie显示不出来的问题
document.cookie用于记录用户操作状态，由变量名=值组成的字串敲完代码后发现cookie显示不出来以为是自己代码问题但是console有没有显示任何问题，愣是看了半小时。百度看了十分钟之后才看见有人说是Chrome会禁止掉cookie（试了用搜狗浏览器也不行），要下载火狐才行，屁颠颠去下载了火狐浏览器打开后，竟然奇迹般好了QAQ从此我桌面多了一个浏览器代码如下：<!...
2020-03-22 13:24:48
533
原创 自学web前端练手——js的localStorage
localStorage是持久化的本地存储，sessionStorage不是，它是伴随着session，窗口一旦关闭就没了。本次效果不是主要的，而是方便自己理解localStorage和sessionStorage的区别。效果如下：连续点击“点击计数！”按钮会显示已点击的次数关闭页面再次打开页面，点击“点击计数！”按钮会在上次点击次数基础上再加一次，而不会清零后重新从0开始算起计数...
2020-03-22 12:58:50
139
原创 自学web前端练手——js的单一按钮显示与隐藏
效果如下：单一按钮显示与隐藏可来回切换代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单一按钮显示隐藏</title> <style type="text/css"> body,div,ul,li...
2020-03-15 19:08:44
517
原创 自学web前端练手——js实现体彩11选5
效果如下：数字是一个个滚动而出。代码如下：注释掉的代码是实现简易版的，即刷新就一次出现五个不同的数字，最后呈现的版本是实现数字滚动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>体彩</title> <sty...
2020-03-15 14:42:20
1550
原创 自学web前端练手——js实现简易计算器
用js实现了简易计算器（加减乘除）。主要运用了eval（String）函数：可计算某个字符串，并执行其中的的 JavaScript 代码。string是必需，即要计算的字符串。返回值为通过计算 string 得到的值。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta chars...
2020-03-14 18:51:49
1115
原创 自学web前端练手——js正则表达式实现表单验证
利用正则表达式来判断用户名是否“由字母、数字、下划线组成，字母开头，限制在4-16位”；判断密码是否“由4-16位字符组成”。为了保护密码隐私性故令密码input的type=“password”，使输入的密码不可见。效果如下：若成功验证则向123.php发送数据。代码如下：<!DOCTYPE html><html lang="en"><head>...
2020-03-14 17:21:33
406
翻译 自学web前端练手——仿电商首页
跟着b站的视频弄的，直接上效果：鼠标悬停上方导航栏，超链接颜色会变。也实现了图片切换。鼠标悬停图片链接时图片会放大代码如下：.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>香菇街 - 你的剁手街</titl...
2020-03-12 16:52:55
448
原创 自学web前端练手——js的文本框聚焦和全选
onmouseover 事件会在鼠标指针移动到指定的元素上时发生。HTML 中:<element onmouseover="SomeJavaScriptCode">JavaScript 中:object.onmouseover=function(){SomeJavaScriptCode};onfocus：当元素获取到焦点的时候触发。odiv.onfocus = func...
2020-03-11 15:13:08
913
原创 自学web前端练手——js的整数计算（表单及其控件）
效果如下：初始界面：按下计算button得出计算结果：重新在框内输入新的数字，再次按下计算button得出计算结果：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><...
2020-03-10 21:07:12
291
原创 自学web前端练手——js的随机点名
就是课堂随机点名器。效果如下：当点击开始点名后，名字数组里的名字就会以1毫秒1个飞速滚动起来。原谅我不会录动图_(:з」∠)_代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机点名</title> <...
2020-03-10 18:04:24
1055
原创 自学web前端练手——咖啡店主页（html+css3+js）
有参照页面，图片百度搜的+星巴克官网存的，半自撸。header部分用js实现图片来回切换。nav导航栏是超链接。最左侧单一的图片是广告栏。主体部分由左侧aside和右侧content组成。aside部分用了table和div，并实现了2d的旋转（可以用奇偶选择器实现，但我试了一下我的有错误，所以就放弃了_(:з」∠)_是我菜）接下来都是很简单的html+css就不做说明了。效果如下：...
2020-03-10 16:32:31
3555
2
原创 自学web前端练手——css3的卡片翻转
css3的3D的效果，当鼠标悬停在卡片上让卡片翻转，显示卡片背面的文字。可来回翻转，不是js的图片切换。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>卡片翻转</title> &...
2020-03-10 14:00:59
448
原创 自学web前端练手——js的节日倒计时
共设置了三种情况：距离目标日期剩余天数大于1天：提醒还有多少天；明天就是目标日期：提醒只有一天了；目标日期已经逝去：提醒日期已经过去了；效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>节日倒计时...
2020-03-09 21:39:40
401
原创 自学web前端练手——js的九九乘法表
利用js实现九九乘法表（其实就跟用C实现一样简单，不过就是加了表格边框而已）。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九九乘法表</title> <style type=...
2020-03-09 20:48:27
3460
1
原创 自学web前端练手——js的考试倒计时
考试倒计时，并附带15分钟和5分钟的图片更换。（没调整统一的图片大小）起初文本一直出不来，搞了半小时（一条一条的检查排查错误），最后把setInterval从函数体中弄出来就好了，吐了_(:з」∠)_效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UT...
2020-03-07 23:40:31
714
原创 自学web前端练手——js的动态时钟
获取当前的时间后每秒时钟也跟着增加一秒，实现动态时钟同步。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态时钟</title> <style type="text/css"...
2020-03-07 21:14:42
380
原创 自学web前端练手——js的猜数字游戏
运用了Math.floor、Math.random、parseInt、prompt这四个函数。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>猜数字游戏</title></h...
2020-03-07 19:17:08
1020
原创 自学web前端练手——js的图片切换
共有六张图片，按next按钮切换到下一张，按prev切换到上一张，可来回切换。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换</title> <style> ...
2020-03-07 16:58:49
527
原创 自学web前端练手——js的onclick
第一天学JS，目前只实现了单击一次图片使文字改变，没有实现重复切换，后续完善。效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text...
2020-03-05 15:32:00
566
原创 自学web前端练手——静态婚纱店官网
自撸，有参照页面，图片百度搜的。对比昨晚的静态博客页面，今天的加入了超链接以及好几个盒子，外加稍微美化了下页面。效果如下：
2020-03-04 23:15:25
547
原创 C++运算符重载——关于时间的判断加减和自加自减
#include<iostream>#include<stdlib.h>using namespace std;class Clock{public: Clock(int hour=0,int minute=0,int second=0); void showTime()const; Clock& operator++(); Clock opera...
2020-03-04 12:37:45
602
原创 C++运算符重载——复数的加减乘除
偶然翻到之前上面向对象程序设计实验课做的作业，po出来一下，相信以后还会有人学到并写到。#include<iostream>#include<stdlib.h>using namespace std;class Complex{public: Complex(double r=0.0,double i=0.0) {real=r;imag=i;} Comp...
2020-03-04 12:33:56
1221
原创 自学web前端练手——仿博客静态页面1
看游戏比赛直播等待间隙随意弄的，日后会更加完善。目前效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实战1</title> <style> *{ margin: 0; ...
2020-03-03 22:39:42
982
原创 自学web前端练手——CSS样式基础
CSS样式采用内嵌样式完成。网站实现如下内容：（1）包含1个网页。（2）网页中要用到表格， a) 表格分成2行，第一行包含表头单元格 b) 第二行包含普通单元格 c）表格宽度300px（3）表格第一行 a) 有背景颜色#3cc b) 文本居中对齐 c) ...
2020-03-03 20:19:38
1940
2
原创 自学web前端练手——HTML基础
网站实现如下内容：（1）包含两个网页，内容跟英语相关，具体内容自己设计。（2）网页中要用到div标签，合理对网页的区域进行划分。（3）每个网页都有导航栏，导航栏可以水平也可以垂直排列，可以通过导航栏在两个页面之间跳转。（4）网页有一级标题。（5）网页有正文段落。（6）网页上用到1个图片，美化页面。只是纯粹练手没有使用CSS来美化网页。效果图如下：附上代码：kris.html...
2020-03-03 20:14:02
2587
原创 操作系统实验之时间轮转算法（数组实现，简单易懂，快速编程）
前段时间上操作系统实验课，刚开始因为懒得写所以直接在CSDN上找代码copy。但是找了很久发现都有些许bug不能运行出来，一气之下自己动手写了。看了很多人都是用链表写的，但是由于我上学期数据结构没怎么仔细听课，链表没学好，所以我是用数组写的，我觉得数组更简单易懂。尚在学习，代码肯定多有不足，望大家指教。#include<cstdlib>#include<iostream...
2019-10-31 21:08:30
389
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人