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