子卿Up-CSDN博客

原创 “21天好习惯”第一期－21 CSS动画

今天是两个CSS的动画特效，（其中运用了伪选择器）还比较好看，值得记录。/* 悬停图片遮罩层 */.b2 { position: absolute; top: 0px; left: 350px; width: 394px; height: 446px; pointer-events:none; background: black; opacity: 0;}.b1:hover +.b2{ opacity: 0.8; ...

2021-11-12 22:37:45 104

原创 “21天好习惯”第一期－20 登入界面随鼠标自由移动

今天看到了一篇博客，讲的是登入界面可随鼠标自由移动，觉得比较有意思。JavaScript：dragn.addEventListener('mousedown',function(e){ var x=e.pageX-login.offsetLeft; var y=e.pageY-login.offsetTop; document.addEventListener('mousemove',move);...

2021-11-11 22:14:24 706

原创 “21天好习惯”第一期－19 飞机大战全代码添加功能（敌方飞机速度随分数增加而增加，加速BUFF,上下移动）

今天新加的功能都是有注释的，大家如果有什么不清楚的可以与我私聊。（原创不易，求个点赞，收藏）//创建己方飞机function creathero() { var hero = document.createElement('div'); hero.className = "hero"; var gameBox = document.querySelector('.gameBox'); gameBox.appendChild(hero); var y1 = hero.offsetLeft;.

2021-11-10 22:54:25 1893

原创 “21天好习惯”第一期－18 仿微博热门话题

HTML：<ul class="q1"> <span class="box">03</span><span class="eye">????216</span><li>印尼东爪哇南部海域6.1级地震已致8死333333</li> <span class="box">04</span><span class="eye">????317</span><li>华

2021-11-09 22:24:56 360

原创 “21天好习惯”第一期－17 封装好的飞机大战全代码

html：<div class="info"> 分数<span class="score"></span> </div> <div class="gameBox"> <div class=""> <button class="action">开始</button> </div> </div>CSS：* { padding: 0; m

2021-11-08 23:03:02 496

原创 “21天好习惯”第一期－16 JavaScript实现倒计时

先创建一个名叫time的divCSS样式：.time{ background: skyblue; width: 367px; height: 300px; text-align: center; margin: auto; font-size: 30px;}Javascript;var str = prompt('请输入时间');var time1= setInterval(function(){ var newtime = new Date(); var no..

2021-11-07 21:34:04 1451 1

原创 “21天好习惯”第一期－15 HDU2058 The sum problem

题目链接：HUD2058 The sum problem#include <stdio.h>int main(){ int m,n; int len,a; while(scanf("%d%d",&n,&m)!=EOF&&(m||n)) { len=sqrt(2.0*m); while(len>0) { a=m/len+(1-len)/2.

2021-11-06 22:26:46 66

原创 “21天好习惯”第一期－14 HDU2044 一只小蜜蜂

题目链接：HDU2044 一只小蜜蜂#include<stdio.h>int main(){ int x,a,b,i; scanf("%d",&x); while(scanf("%d %d",&a,&b)!=EOF) { double f1=0,f2=1,f=0; for(i=0;i<(b-a);i++) { f=f1+f2; f1=f2; f2=f; .

2021-11-05 22:27:42 215

原创 “21天好习惯”第一期－13 HDU2091 空心三角形

题目链接：HDU2091 空心三角形#include<stdio.h>int main(){ int n,i,k,l; char a; int flag=1; while(scanf("%c",&a)!=EOF&&a!='@') { getchar(); scanf("%d",&n); getchar(); if(flag==0) printf("\n"); if(n!=1)

2021-11-04 22:45:58 60

原创 “21天好习惯”第一期－12 飞机大战-5

添加计分器//打飞机,添加计分器var number = 0;var score = document.querySelector('.score');score.innerHTML = number;var time6 = setInterval(function(){ var gameBox = document.querySelector('.gameBox'); var bullet = document.querySelectorAll('.bullet'); var enem

2021-11-03 21:34:12 87

原创 “21天好习惯”第一期－11 飞机大战-4

JavaScript：己方飞机死亡//己方飞机死亡var time7 = setInterval(function(){ var gameBox = document.querySelector('.gameBox'); var enemy = document.querySelectorAll('.enemy'); var hero = document.querySelector('.hero'); var j = 0; for(j;j<enemy.length;j++)

2021-11-02 21:37:49 320

原创 “21天好习惯”第一期－10 鲁滨逊漂流记网页-2

在这个网页中，我运用了多种动画：动画按钮、打字机显示文字效果、悬停图片遮罩层，这些在CSS中都有注释。* { padding: 0; margin: 0; color: white;}li{ list-style: none;}html { height: 100%; overflow: hidden;}div { display: block;}.boxs { position: relative; width: 100%; height: 750px;}.

2021-11-01 21:55:23 127 2

原创 “21天好习惯”第一期－9 鲁滨逊漂流记网页-1

小时候看到《鲁滨逊漂流记》时，就被书中所描述的一个个场景深深地吸引了，在这次网页设计作业中便想以这本书为主题来制作网页。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>鲁滨逊漂流记</title> <link rel="stylesheet" type="text/css" href="css/file.css"/> </head&

2021-10-31 21:53:50 187

原创 “21天好习惯”第一期－8 飞机大战-3

今天添加了边界判断和碰撞判断1.边界判断//边界判断：清除越界的盒子var time5=setInterval(function(){ var gameBox = document.querySelector('.gameBox'); var bullet = document.querySelectorAll('.bullet'); var i = 0; for(i;i<bullet.length;i++) { if(bullet[i].offsetTop <0)

2021-10-30 22:32:48 104

原创 “21天好习惯”第一期－7 利用css制作点播图

我们在制作网页时经常会遇到多个框架类似的页面，于是便想将其关联起来，点播图可以制作出类似JavaScript轮播图的效果。1.HTML<div class="boxset"> <input type="radio" name="r" id="r1" checked="checked"> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"&gt

2021-10-29 22:53:28 159 1

原创 “21天好习惯”第一期－6 c语言--环形解密

#include <stdio.h>int main() { unsigned char a; int k; while(scanf("%c%d",&a,&k)!=EOF) { getchar(); unsigned char b; if(k<0) { k=(0-k)%26; b=a+k; } else { k=k%26; b=a+26-k; } if(b>'z') b=b-26...

2021-10-28 22:57:18 1056

原创 “21天好习惯”第一期－5 飞机大战-2

1.实现己方飞机移动//己方飞机移动document.onkeydown = function(hero){ var hero = document.querySelector('.hero'); if( event.keyCode==65 && hero.offsetLeft >= 20){ hero.style.left = hero.offsetLeft - 20 + 'px'; } if( event.keyCode==68 && hero.

2021-10-27 22:51:52 131 1

原创 “21天好习惯”第一期－4 飞机大战-1

1.创建对战窗口，上面有一个计分器、下面是对战的窗口<div class="info"> 分数<span class="score"></span></div><div class="gameBox"></div>.info {text-align: center;font-size: 30px;}.gameBox {position: relative;width: 500px;height: 600

2021-10-26 21:58:04 126

原创 “21天好习惯”第一期－3 制作一个登入界面-3，添加验证码

一般登入账号时会有验证码，所以今天我就在我的登入界面中添加了可变的验证码1.添加一个验证码的输入框和一个存放验证码的盒子<div class="login"> <a>登入</a></div><div class="loginIN"> 登入 <div class="exist"> 关闭 </div> <div class="loginININ"> <input type="te

2021-10-25 21:42:53 182

原创 “21天好习惯”第一期－2 制作一个登入界面-2，添加JavaScript

昨天写的登入界面交互感不强，所以今天加入一些JavaScript。想实现点击一个登入按钮就可以出现登入界面。1.添加一个登入的按钮，并确定样式.login { position: fixed; border-radius: 10px; background: gray; width: 60px; height: 24px; top: 10%; right: 25%; text-align: center; }2.加入J

2021-10-24 21:16:30 1497

原创 “21天好习惯”第一期－1 制作一个登入界面-1，复习html和css

首先要先完成布局：<div class="loginIN"> 登入 <div class="exist"> 关闭 </div> <div class="loginININ"> <input type="text" class="x" placeholder="请输入用户名" />...

2021-10-23 20:48:33 553 2

子卿Up的博客