美文网首页前端基础
按钮控制雪花

按钮控制雪花

作者: 向着光噜噜 | 来源:发表于2019-09-29 18:12 被阅读0次

功能描述:1.页面开始之前开始、暂停、删除按钮均不可用,点完新增按钮,开始、暂停、删除按钮可用 

                  2. 点击新增,随机增加雪花数量和位置

                       点击开始,雪花开始飘落

                       点击暂停,雪花静止

                       点击删除,删除一些雪花

源代码如下:

<!DOCTYPE hetml>

<html>

<head>

<title>雪花飘啊飘</title>

<style type="text/css">

body{

background-color:black;

}

input{

width:60px;

height:40px;

font: normal 14px '微软雅黑';

font-weight:bold;

background-color:pink;

}

</style>

</head>

<body>

<input type="button" value="新增"  onclick="creatMany()"/>

<input type="button" value="开始" id="start" onclick="start()" />

<input type="button" value="暂停" id="stop" onclick="stop()"/>

<input type="button" value="删除" id="remove"onclick="remove()"/>

</body>

<script>

var timer;

document.getElementById("start").disabled = "disabled";

document.getElementById("stop").disabled = "disabled";

document.getElementById("remove").disabled = "disabled";

function creatOne(){

var x = Math.random()*window.innerWidth;

var y = Math.random()*window.innerHeight;

var div = document.createElement("div");

div.style.position = "fixed";

div.style.left = x+"px";

div.style.top = y+"px";

div.innerHTML = "<img src='s.jpg' style='width:43px'/>";

document.body.appendChild(div);

}

function creatMany() {

for (var i = 1; i <= 20; i++) {

creatOne();

}

document.getElementById("start").disabled ="";

document.getElementById("stop").disabled ="";

document.getElementById("remove").disabled ="";

}

function start(){

var snow = document.getElementsByTagName("div");

timer = setInterval(function(){

for (var i = 0;i<snow.length;i++){

var randomY = Math.random()*3;

snow[i].style.top = snow[i].offsetTop + randomY + "px";

// if(snow[i].offsetTop%200==0){

// creatOne();

// }

if(snow[i].offsetTop>window.innerHeight){

snow[i].remove();

creatOne();

}

}

},3)

document.getElementById("start").disabled = "disabled";

document.getElementById("stop").disabled = "";

}

function stop(){

clearInterval(timer);

document.getElementById("stop").disabled = "disabled";

document.getElementById("start").disabled = "";

}

function remove(){

var snow = document.getElementsByTagName("div");

for(var i=0;i<snow.length;i++){

snow[i].remove();

}

}

</script>

</html>

相关文章

  • 按钮控制雪花

    功能描述:1.页面开始之前开始、暂停、删除按钮均不可用,点完新增按钮,开始、暂停、删除按钮可用 ...

  • 按钮事件

    1、单个按钮 直接操作元素的class 2、多个按钮 引入 index 控制多个按钮的class

  • RACSubject替换代理

    需求:1.给当前控制器添加一个按钮,modal到另一个控制器界面2.另一个控制器view中有个按钮,点击按钮,通知...

  • FloatactionButton菜单动画

    浮动按钮的弹出菜单动画 将几个按钮重叠摆放,使用ValueAnimator更新按钮的坐标实现。 布局 控制

  • Swift学习笔记(0.1---循环按钮 ScrollView

    循环按钮+ScrollView处理点击事件 目的:控制器的scroll联动上方按钮的 按钮的创建,这个按钮的多少取...

  • ios  按钮的touchDown事件延迟

    当按钮的位置位于控制器的最底部时,touchDown事件会有所延迟,例如控制器最底部有一个语音按钮,长按语音按钮说...

  • Alert.alert()和alert()和Prompt和Ale

    点击确认按钮控制台打印

  • 全选/全不选js

    点击头部按钮,控制身部全选/全不选身部按钮全选/全不选,控制头部全选全不选 html部分 ` css部分 js部分

  • 分栏控制器 - OC

    分栏控制器 UITabBarItem:分栏按钮元素对象badgeValue:分栏按钮提示信息selectedInd...

  • 用按钮控制排序

    用按钮控制排序(或者说控制器中如何使用过滤器) 思想:按钮控制肯定是ng-click触发(js访问的变量都是往上找...

网友评论

    本文标题:按钮控制雪花

    本文链接:https://www.haomeiwen.com/subject/gowzectx.html