fed
fed copied to clipboard
Published
20 hours ago •
BestACE
BestACE
【签到帖】软件161复习签到帖
请同学们在本帖中签到 格式如下：00俞淑燕 今天课程完成的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.win {
width: 300px;
height: 300px;
background-color: #dfd;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
/*display: none;*/
z-index: 1000;
}
.win.show{
opacity: 1;
}
</style>
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
</head>
<body>
<div id ="btn" class="animated bounce">
你好，请点击这里
<!--<i class="fa fa-address-book"></i>-->
<i class="fa fa-th-list"></i>
<!--<i class="fa fa-th"></i>-->
</div>
<script type="text/javascript">
var btn = document.getElementById('btn');
var oWin;
oWin = document.createElement("div");
oWin.id = "win";
oWin.className = "win";
document.body.appendChild(oWin);
btn.addEventListener('click',showWin);
function showWin(){
var event = event||window.event;
var target = event.target||event.srcElement;
oWin.classList.add('show');
oWin.classList.add('bounce');
oWin.classList.add('animated');
if(target.classList.contains('fa-th-list')){
target.classList.remove('fa-th-list');
target.classList.add('fa-th');
}else{
target.classList.add('fa-th-list');
target.classList.remove('fa-th');
}
}
</script>
</body>
</html>
12沈丹青 今天课程完成的代码如下：
前端开发
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
较强的视觉设计
前端技术包括4个部分：前端美工、IE兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等.
根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术.
网页换肤 08姜凯 今天课程完成的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页换肤</title>
<link id="link" rel="stylesheet" href="css/css1.css" />
</head>
<body>
<a id="a1" href="javascript:">皮肤1</a> <a id="a2" href="javascript:">皮肤2</a>
<h1>前端开发</h1>
<p>Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。</p>
<h1>较强的视觉设计</h1>
<p>前端技术包括4个部分：前端美工、IE兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等.</p>
<p>根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术.</p>
<script type="text/javascript">
var a1=document.getElementById('a1');
var a2=document.getElementById('a2');
var lk=document.getElementById('link');
a1.onclick=function(){
lk.href="css/css1.css";
}
a2.onclick=function(){
lk.href="css/css2.css";
}
</script>
</body>
</html>
body{
background: #F06431;
color:#fff;
}
a{
color: #fff;
}
h1{
font-size: 20px;
text-decoration: underline;
}
p{
font-size:14px;
text-indent: 2em;
line-height: 1.5em;
}
36 黄小翠 今天课程完成的代码如下（菜单）：
<head>
<meta charset="utf-8" />
<title>菜单</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
ul,li{
list-style: none;
margin: 20px 0;
}
li{
margin: 10px 0;
}
.head{
font-size: 24px;
background-color:plum;
width: 50%;
height: 70px;
line-height: 70px;
color: deepskyblue;
box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
}
.sub{
width: 200px;
height: 0;
overflow: hidden;
transition: .3s;
}
.menu{
position: absolute;
top: 70px;
background-color: plum;
width: 200px;
height: 0;
color: white;
box-shadow: 2px 2px 5px rgba(0, 0, 0, .26);
transition: .3s;
}
#button{
margin-left: 20px;
cursor: pointer;
transition: .3s;
}
.item{
cursor: pointer;
transition: .3s;
}
.sub{
width: 260px;
height: 0;
overflow: hidden;
transition: .3s;
}
.fa-angle-right{
transition: .3s;
}
</style>
</head>
<body>
<div class="head">
<i class="fa fa-bars button" id='button' aria-hidden="true"></i>
Annabelle's menu
</div>
<div class="menu">
<ul id="menu_1">
<li class="item">兴趣爱好 <i class="fa fa-angle-right" aria-hidden="true"></i></li>
<ul class="sub">
<li>看小说</li>
<li>写字</li>
<li>吃</li>
</ul>
</ul>
<ul id="menu_2">
<li class="item">个人性格 <i class="fa fa-angle-right" aria-hidden="true"></i></li>
<ul class="sub">
<li>温柔</li>
<li>是个淑女</li>
<li>大方美丽</li>
</ul>
</ul>
</div>
<script type="text/javascript">
var oBtn = document.querySelector('#button');
var oMenu = document.querySelector('.menu');
var oItem = document.querySelectorAll('.item');
var oSub = document.querySelectorAll('.sub');
var oR = document.querySelectorAll('.fa-angle-right');
var vBtn = false,
vItem = new Array(),
num = 200;
oBtn.onclick = function() {
if(!vBtn){
oMenu.style.height = num + 'px';
oBtn.style.transform = 'rotate(90deg)';
vBtn = true;
} else {
oMenu.style.height = 0;
oBtn.style.transform = 'rotate(0deg)';
vBtn = false;
}
}
for(var i = 0; i < oItem.length; i++){
vItem[i] = false;
(function(i) {
oItem[i].addEventListener('click',function() {
if(!vItem[i]){
num += 130;
oSub[i].style.height = 130 + 'px';
oMenu.style.height = num + 'px';
oR[i].style.transform = 'rotate(90deg)';
vItem[i] = true;
} else {
num -= 130;
oSub[i].style.height = 0;
oMenu.style.height = num + 'px';
oR[i].style.transform = 'rotate(0deg)';
vItem[i] = false;
}
});
})(i);
}
</script>
</body>
17 蒋轶聪 今天课程完成的代码如下：
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://jycxh11.github.io/other/Work23/js/intense.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://jycxh11.github.io/other/Work23/js/intense.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-size: cover;
width: 100%;
height: 100%;
}
h1 {
width: 200px;
margin: auto;
margin-top: 250px;
cursor: pointer;
}
.container {
width: 760px;
min-height: 400px;
margin: 150px auto;
background-color: rgba(255, 255, 255, .8);
}
.container img {
border: 5px solid #eee;
box-shadow: 1px 5px 10px rgba(0, 0, 0, .3);
margin: 5% 0 5% 6%;
display: inline-block;
cursor: url(https://jycxh11.github.io/other/Work23/img/plus_cursor.png), pointer;
width: 300px;
height: 300px;
background-size: cover;
background-position: 50% 50%;
}
.demo-image.first {
background-image: url("https://jycxh11.github.io/other/Work23/img/h1_small.jpg");
}
.demo-image.third {
background-image: url("https://jycxh11.github.io/other/Work23/img/v1_small.jpg");
}
#menu {
display: none;
opacity: 0;
}
#menu .close {
position: relative;
right: -1200px;
top: 150px;
transform: rotate(45deg);
cursor: pointer;
}
</style>
</head>
<body>
<div class="title">
<h1>图片全屏效果</h1>
</div>
<div id="menu">
<img src="https://jycxh11.github.io/other/Work23/img/plus_cursor.png" class="close" />
<div class="container">
<img class="demo-image first" data-image="https://jycxh11.github.io/other/Work23/img/h1_small.jpg" />
<img class="demo-image third" data-image="https://jycxh11.github.io/other/Work23/img/v1_small.jpg" />
</div>
</div>
<script>
var close = document.querySelector('.close');
var menu = document.querySelector('#menu');
var h1 = document.querySelector('h1');
close.addEventListener('click', function() {
menu.style.display = 'none';
menu.style.opacity = 0;
h1.style.display = 'block';
h1.style.opacity = 1;
});
h1.addEventListener('click', function() {
h1.style.display = 'none';
h1.style.opacity = 0;
menu.style.display = 'block';
menu.style.opacity = 1;
})
window.onload = function() {
var element = document.querySelectorAll('.demo-image');
Intense(element);
}
</script>
</body>
20 何桂清 今天课程完成的代码如下：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.win {
width: 300px;
height: 300px;
background-color: #dfd;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
/*display: none;*/
z-index: 1000;
}
.win .btn {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
z-index: 2;
}
.win .content {}
.mask {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .2);
z-index: 100;
display: none;
transition: all .5s;
}
.show{
/*display: block;*/
}
/*.win{
opacity: 0;
}
.win.show{
transition: opacity 1s;
opacity: 1;
}*/
.win{
opacity: 0;
}
.win.show{
opacity: 1;
animation: rubberBand 1s;
}
@keyframes rubberBand { from { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, 0.75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }
50% { transform: scale3d(1.15, 0.85, 1); }
65% { transform: scale3d(.95, 1.05, 1); }
75% { transform: scale3d(1.05, .95, 1); }
to { transform: scale3d(1, 1, 1); } }
</style>
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<a href="javascript:" class="modal" data-content="模拟窗口案例">打开模拟窗口</a>
<div class="modal" data-content="另外的一些内容">嘿嘿</div>
<script type="text/javascript">
//alert("ok");
var oModal = document.getElementsByClassName('modal');
var oWin, oBtn, oContent,oMask;
if(oModal.length >= 1) {
oWin = document.createElement("div");
oWin.id = "win";
oWin.className = "win";
document.body.appendChild(oWin);
oBtn = document.createElement("div");
oBtn.id = "btn";
oBtn.className = "btn";
oBtn.innerHTML = "<i class='fa fa-close'></i>";
oWin.appendChild(oBtn);
oBtn.addEventListener("click", closeWin);
oContent = document.createElement("div");
oContent.className = "content";
oWin.appendChild(oContent);
oMask = document.createElement("div");
oMask.className = "mask";
document.body.appendChild(oMask);
for(var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click", openWin);
}
} else {
document.write("没有可以模拟窗口的对象");
}
function openWin(event) {
oMask.classList.add('show');
oWin.classList.add('show');
oContent.innerHTML = event.target.dataset.content;
}
function closeWin(event) {
oMask.classList.remove('show');
oWin.classList.remove('show');
oContent.innerHTML = "";
}
</script>
</body>
24 徐炜昊 网页换肤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link id="link" rel="stylesheet" type="text/css" href="css/css1.css"/>
</head>
<body>
<a id="a1" href="javascript:">皮肤一</a> <a id="a2" href="javascript:">皮肤二</a>
<script type="text/javascript">
var a1=document.getElementById("a1");
var a2=document.getElementById("a2");
var lk=document.getElementById("link");
a1.onclick=function(){
lk.href="css/css1.css";
}
a2.onclick=function(){
lk.href="css/css2.css";
}
</script>
</body>
</html>
css/css1.css
body{
background: grey;
color:#fff;
}
a{
color: #fff;
}
css/css2.css
body{
background: darkseagreen;
color:#fff;
}
a{
color: #fff;
}
37 曾思思 今天课程完成的代码如下：换肤效果
css/css1.css body{ background: pink; color:#fff; } a{ color: #fff; }
css/css2.css body{ background: deepskyblue; color:#fff; } a{ color: #fff; }
皮肤1 皮肤2前端开发
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览。
<script type="text/javascript">
var a1=document.getElementById('a1');
var a2=document.getElementById('a2');
var lk=document.getElementById('link');
a1.onclick=function(){
lk.href="css/css1.css";
}
a2.onclick=function(){
lk.href="css/css2.css";
}
</script>
</body>
随机背景 08姜凯
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document </title>
<style type="text/css">
#banner{
width: 840px;
height: 372px;
margin: 0 auto;
position: relative;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.2);
}
#banner .tip{
position: absolute;
left: 2em;
top: 2em;
color: #fff;
}
</style>
</head>
<body id="bd">
<div id="banner">
<div class="tip">刷新页面体验随机效果</div>
</div>
<script type="text/javascript">
var sStr="1.jpg|2.jpg|3.jpg|4.jpg";
var aStr=sStr.split("|");
var oBanner=document.getElementById('banner');
var num=parseInt(Math.random()*4);
oBanner.style.backgroundImage="url(img/"+aStr[num]+")";
</script>
</body>
</html>
47 许桃美 今天课程完成的代码如下 （网页换肤）：
<head>
<meta charset="utf-8" />
<link id="a" rel="stylesheet" type="text/css" href="css/css1.css"/>
<title></title>
</head>
<body>
<a id="b" href="javascript:">皮肤1</a>
<a id="c" href="javascript:">皮肤2</a>
<h1>再别康桥</h1>
<p>轻轻的我走了，</p>
<p>正如我轻轻的来；</p>
<p>我轻轻的招手，</p>
<p>作别西天的云彩。</p>
<p>那河畔的金柳，</p>
<p>是夕阳中的新娘；</p>
<p>波光里的艳影，</p>
<p>在我的心头荡漾。</p>
<p>软泥上的青荇，</p>
<p>油油的在水底招摇；</p>
<p>在康河的柔波里，</p>
<p>我甘心做一条水草！</p>
<script type="text/javascript">
var a=document.getElementById('a')
var b=document.getElementById('b')
var c=document.getElementById('c')
b.onclick=function(){
a.href="css/css1.css";
}
c.onclick=function(){
a.href="css/css2.css";
}
</script>
</body>
css1代码如下： body{
background:white ;
color:silver;
}
css2代码如下： body{
background-color: black;
color:silver;
}
34 冯盛鹏 今天完成的代码如下
<script type="text/javascript">
var btnBlue=document.getElementById('blue');
var btnRed=document.getElementById('red');
btnBlue.addEventListener('click',setBlue);
btnRed.addEventListener('click',setRed);
function setBlue(){
document.body.id="toblue";
var id=document.body.id;
localStblue.setItem('getId',id);
}
function setRed(){
document.body.id="tored";
var id=document.body.id;
localStblue.setItem('getId',id);
}
var curId=localStwhite.getItem('getId');
if(curId !=null){
document.body.id=curId;
}
</script>
</body>
46 张益桐 今天课程完成的代码如下 （放大镜效果）： 代码如下：
<body>
<img src="img/2.jpg" class="zoomPic" />
<img src="img/2.jpg" class="zoomPic" />
<img src="img/2.jpg" class="zoomPic" />
<img src="img/2.jpg" class="zoomPic" />
<img src="img/2.jpg" class="zoomPic" />
<img src="img/2.jpg" class="zoomPic" />
<img src="img/2.jpg" class="zoomPic" />
<img src="img/2.jpg" class="zoomPic" />
<img src="img/2.jpg" class="zoomPic" />
<script type="text/javascript">
(function() {
var ratio = [];
var winWidth=window.innerWidth;
var winHeight=window.innerHeight;
var zoom = document.querySelectorAll('.zoomPic');
if(zoom.length == 0) {
return false;
}
var zoomHandler = document.createElement('div');
zoomHandler.className = 'zoomHandler';
document.body.appendChild(zoomHandler);
for(var i = 0; i < zoom.length; i++) {
zoom[i].addEventListener("load", (function(n) {
return function() {
ratio[n] = zoom[n].naturalWidth / zoom[n].width;
}
})(i));
zoom[i].addEventListener("mousemove", (function(n) {
return function(event) {
if(ratio[n] <= 1) {
return false;
}
var event = event || window.event;
var target = event.target || event.srcElement;
//x,y 相对于浏览器的位置
var cx = event.clientX;
var cy = event.clientY;
//ox,oy 相对于图像的位置
var ox=event.offsetX||event.layerX;
var oy=event.offsetY||event.layerY;
var zoomShowWidth = 100;
var zoomShowHeight = 100;
zoomHandler.style.width = zoomShowWidth + "px";
zoomHandler.style.height = zoomShowHeight + "px";
zoomHandler.style.left = cx + "px";
zoomHandler.style.top = cy + "px";
zoomHandler.style.backgroundImage = 'url(' + target.src + ')';
zoomHandler.style.backgroundPosition = (-ratio[n] *ox + zoomShowWidth / 2) + "px "+(-ratio[n] * oy + zoomShowHeight / 2) + "px";
zoomHandler.style.display = "block";
}
})(i));
zoom[i].addEventListener("mouseout", function() {
zoomHandler.style.display = "none";
});
}
})();
</script>
</body>
css代码：body { min-height: 1000px; padding: 0; margin: 0; }
.zoomPic {
width: 400px;
margin: 30px;
position: relative;
border: 1px solid rgba(0, 0, 0, .1);
z-index: 1;
}
.zoomHandler {
position: fixed;
border: 1px solid rgba(0, 0, 0, .1);
background: rgba(255, 255, 255, .2);
box-shadow: 0px 0px 2px rgba(0,0,0,.5);
z-index: 1000;
border-radius: 100px;
transform: translate(-50%, -50%);
pointer-events: none;
}
28 郑涛 模拟窗口如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>123456789</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
#window{
margin: auto;
margin-top: 100px;
width: 400px;
height: 300px;
color: black;
background: blanchedalmond;
position: relative;
display: none;
}
#window a{
position: absolute;
top: 2px;
right: 4px;
}
#window p{
text-align: center;
line-height: 300px;
}
#font i{
font-size: 26px;
color: chocolate;
}
</style>
</head>
<body>
<a href="#" id="font"><i class="fa fa-cog"></i></a>
<div id="window">
<a href="#"><i class="fa fa-close"></i></a>
<p>welcome to you</p>
</div>
<script type="text/javascript">
var oFont = document.querySelector('#font');
var oWindow = document.querySelector('#window');
var oClose = document.querySelector('#window a');
oFont.onclick = function(){
oWindow.classList.add("animated");
oWindow.classList.add("bounceIn");
oWindow.style.display = "block";
}
oClose.onclick = function(){
oWindow.style.display = "none";
}
</script>
</body>
</html>
19 陈黎铭 今天完成的代码如下 （下雪效果）
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background: url(img/apple2.jpg);
color: white;
font-family: 'Petit Formal Script', cursive;
overflow: hidden;
}
.title {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 0;
font-size: 1.6em;
}
.snow {
position: absolute;
background-color: #fff;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="title">
<h1>snow</h1>
</div>
<audio src="//katiebaca.com/codepen/merry-christmas-mr-lawrence.mp3" autoplay loop></audio>
<script type="text/javascript">
(function() {
function random(min, max, isInt) {
var a = min + Math.random() * (max - min);
return isInt ? parseInt(a) : a;
}
function Snow() {
this.init();
this.draw();
}
Snow.prototype.init = function() {
this.size = random(1, 10, true);
this.alpha = random(0.3, 1, false);
this.x = random(0, Weather.width, true);
this.y = random(-Weather.height, 0, true);
this.z = random(0, 10, true);
this.wind = random(0, Weather.wind, true);
this.speed = random(1, 3, false);
this.reduce = random(1, 4, true);
this.angle = 0;
this.angleSpeed = random(0, 2 * Math.PI, false) / 100;
}
Snow.prototype.draw = function() {
this.o = document.createElement("div");
this.o.className = "snow";
document.body.appendChild(this.o);
this.o.style.width = this.o.style.height = this.size + "px";
this.o.style.opacity = this.alpha;
this.o.style.left = this.x + "px";
this.o.style.top = this.y + "px";
this.o.style.zIndex = this.z;
this.o.style.filter = blur(this.reduce + 'px');
}
Snow.prototype.update = function() {
this.angle += this.angleSpeed;
this.x += Math.cos(this.angle);
this.x += this.wind;
this.y += this.speed;
if(this.y > Weather.height) {
this.init();
}
this.o.style.left = this.x + "px";
this.o.style.top = this.y + "px";
}
var Weather = {
num: 100,
snowLevel: function(level) {
var a;
switch(level) {
case 'b':
a = 1000;
break;
case 'm':
a = 500;
break;
case 's':
a = 100;
break;
default:
break;
};
return Weather.num = a;
},
windDirection: 3,
width: window.innerWidth,
height: window.innerHeight,
snowArray: new Array(),
wind: 1,
createSnows: function() {
for(var i = 0; i < Weather.num; i++) {
var s = new Snow();
Weather.snowArray.push(s);
}
},
runSnows: function() {
for(var i = 0; i < Weather.num; i++) {
Weather.snowArray[i].update();
}
requestAnimationFrame(Weather.runSnows);
},
resize: function() {
Weather.width = window.innerWidth;
Weather.height = window.innerHeight;
console.log(Weather.width);
}
}
Weather.snowLevel('s');
Weather.createSnows();
Weather.runSnows();
addEventListener("resize", Weather.resize);
}());
</script>
</body>
06 潘雪 今天完成的代码如下:
数组复习：
时钟回顾：
</div>
</div>
<script type="text/javascript">
var da;
var oClock=document.getElementById("clock");
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
function runtime(){
da=new Date();
var sec=da.getSeconds()*6;
var min=(da.getMinutes()+da.getSeconds()/60)*6;
var hour=(da.getHours()+da.getMinutes()/60+da.getSeconds()/3600)*30;
oHour.style.webkitTransform="rotate("+hour+"deg)";
oMin.style.webkitTransform="rotate("+min+"deg)";
oSec.style.webkitTransform="rotate("+sec+"deg)";
}
setInterval("runtime()",100);
var date;
var t=document.getElementById("time"); function checktime(num){ if(num<10){ num="0"+num; } return num; } function startime(){ date=new Date(); t.innerHTML=checktime(date.getHours())+":"+checktime(date.getMinutes())+":"+checktime(date.getSeconds());
}
setInterval("startime()",100);
</body>
15 杜任杰 今日完成的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>雪</title>
<style type="text/css">
body {
background-color: black;
background-size: cover;
color: white;
font-family: 'Petit Formal Script', cursive;
overflow: hidden;
}
.title {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 0;
font-size: 1.6em;
}
.snow {
position: absolute;
background-color: #fff;
border-radius: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
(function(){
var win=window.innerWidth;
var hei=window.innerHeight;
var num=500;
var snowArray=new Array();
function random(a,b){
var c = Math.random()*( b - a );
return c;
}
function Snow(){
this.init();
this.draw();
}
Snow.prototype.init = function(){
this.x=random(0, win);
this.y=random(-hei,0);
this.speed=random(0.5,3);
this.wind=random(-2,2);
this.size=random(3,6);
this.alpha=random(0.2,1);
}
Snow.prototype.draw = function(){
this.o=document.createElement('div');
this.o.className="snow";
document.body.appendChild(this.o);
this.o.style.width=this.o.style.height=this.size+"px";
this.o.style.opacity=this.alpha;
}
Snow.prototype.update = function(){
this.x+=this.wind;
this.y+=this.speed;
if(this.y>hei){
this.init();
}
this.o.style.left=this.x+"px";
this.o.style.top=this.y+"px";
}
for(var i=0;i<num;i++){
console.log("1");
var snow=new Snow();
snowArray.push(snow);
}
(function() {
for(var i = 0; i < snowArray.length; i++) {
snowArray[i].update();
}
requestAnimationFrame(arguments.callee);
}());
}());
</script>
</body>
</html>
36 黄小翠 今天完成代码如下（提示框）：
tooltip提示框
tooltip提示框是网页中常见的组件，在网页交互中应用广泛
可实现上、下、 左、 右四种效果
08 姜凯 下雪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background-color: black;
overflow: hidden;
}
.snow{
position: absolute;
background-color: #fff;
border-radius: 100%;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/javascript">
function random(min, max, isInt) {
var a = min + Math.random() * (max - min);
return isInt ? parseInt(a) : a;
}
var snowArray=new Array();
var winH=window.innerHeight;
var num=300;
class Snow{
constructor(){
this.init();
this.draw();
}
init(){
this.size=random(1,10,false);
this.alpha=random(0.1,1,false);
this.x=random(0,1600);
this.y=random(-200,0);
this.wind=random(-2,2);
this.speed=random(0.5,4);
}
draw(){
this.o=document.createElement("div");
this.o.className="snow";
document.body.appendChild(this.o);
this.o.style.width=this.o.style.height=this.size+"px";
this.o.style.opacity=this.alpha;
this.o.style.left=this.x+"px";
this.o.style.top=this.y+"px";
}
update(){
this.x+=this.wind;
this.y+=this.speed;
if(this.y>winH){
this.y=-2;
}
this.o.style.left=this.x+"px";
this.o.style.top=this.y+"px";
}
}
for (var i = 0; i < num; i++) {
var s=new Snow();
snowArray.push(s);
}
(function(){
for (var i = 0; i < snowArray.length; i++) {
snowArray[i].update();
}
requestAnimationFrame(arguments.callee);
})();
</script>
</body>
</html>
03岑灏 今天课程完成的代码如下：
CSS:
- { margin: 0; padding: 0; }
.bar-menu {
z-index: 10; top: 0; left: 0; position: fixed; width: 100%; background: royalblue; }
.hamburger { font-size: 30px; }
.button { transform: none; cursor: pointer; padding: 1em; transition: .5s; }
.submenu { display: none; }
.submenu-item { list-style: none; left: -32px; background: lightskyblue; }
.side-menu { display: none; width: 250px; position: absolute; top: 85px; height: 100vh; background: lightskyblue; }
.menu { cursor: pointer; list-style: none; }
.menu li {
padding: 1em 2em; }
.menu-item { font-size: 18px; /color: #fff;/ text-decoration: none; }
.fa-angle-right { padding-left: .3em; }
