JavaScript String 小球重力弹回


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.box{

width: 50px;

height: 50px;

border-radius: 50%;

background:purple;

position: absolute;

top: 0;

left: 0;

}

.line{

width: 500px;

border: 1px solid #333;

position: absolute;

top: 450px;

left: 0;

}

</style>

</head>

<body>

<div class="box"></div>

<div class="line"></div>

</body>

<script type="text/javascript">

var obox=document.querySelector(".box");

var speed=5;//计步器

var target=400;//下落高度

document.onclick=function(){

setInterval(function(){

speed+=10;

var now=obox.offsetTop+speed;

if(now>=target){

now=target;

speed*=-1;//当小球到达底部停止，使他方向相反运动

speed*=0.9;//使小球有一定的速度

}

obox.style.top=now+"px";

},30)

}

</script>

</html>

JavaScript String 小球重力弹回的更多相关文章

  1. 弹性ScrollView,和下啦刷新的效果类似 实现下拉弹回和上拉弹回

    今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个很多需求都用的这种效果 其实这是一个自定义的scrollView,上代码,这是我写在一个公共的组件包里的 package com.p ...

  2. 弹性ScrollView,和下啦刷新的效果相似 实现下拉弹回和上拉弹回

    今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个非常多需求都用的这样的效果 事实上这是一个自己定义的scrollView,上代码.这是我写在一个公共的组件包里的 package c ...

  3. 充满想象力的 JavaScript 物理和重力实验

    在这个列表中挑选了9个物理和重力实验,用来展示 Javascript 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的 ...

  4. JavaScript String 对象

    JavaScript String 对象 String 对象 String 对象用于处理文本(字符串). String 对象创建方法: new String(). 语法 var txt = new S ...

  5. javascript string 函数集

    JavaScript_String对象说明 string中文为"字符串"的意思,String继承自Object对象,此对象提供字符串的查找操作等函数 JavaScript字符串类型 ...

  6. 一款jQuery实现重力弹动模拟效果特效,弹弹弹，弹走IE6

    一款jQuery实现重力弹动模拟效果特效 鼠标经过两块黑色div中间的红色线时,下方的黑快会突然掉落, 并在掉落地上那一刻出现了弹跳的jquery特效效果,非常不错,还兼容所有的浏览器, 适用浏览器: ...

  7. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  8. 【timeisprecious】【JavaScript 】JavaScript String 对象

    JavaScript>String 对象 1 .From Runnob JavaScript String 对象(概览) JavaScript String 对象(教程)

  9. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

随机推荐

  1. python课堂整理3---字符串魔法

    字符串魔法 1.首字母大写功能 test = "alex" v = test.capitalize() print(v) 2.所有变小写(casefold更厉害,可以将很多未知的其 ...

  2. linux初学者-DDNS配置篇

    linux初学者-DDNS配置篇 如果DNS服务器要记录多台主机的IP,且这些主机的IP都是通过DHCPD服务自动获取的,那么将会造成很大的困难,因为在DNS设置时无法得知主机具体的IP.如果DHCP ...

  3. Shiro权限管理框架（二）：Shiro结合Redis实现分布式环境下的Session共享

    首发地址:https://www.guitu18.com/post/2019/07/28/44.html 本篇是Shiro系列第二篇,使用Shiro基于Redis实现分布式环境下的Session共享. ...

  4. rabbitMQ_Publish/Subscribe(三)

    发布/订阅 生产者发布信息,多个订阅者可以同时接收到信息. 转发器 现在是时候在RabbitMQ中引入完整的消息传递模式了. 让我们快速了解我们在以前的教程中介绍的内容: 生产者是一个发送消息的应用程 ...

  5. 入门MySQL——架构篇

    前言:  上篇文章我们介绍了入门MySQL的基本概念,看完上篇文章,相信你应该了解MySQL的前世今生了吧.本篇文章将带你从架构体系来学习MySQL.我认为学习MySQL架构体系应该是入门阶段必须的, ...

  6. 数据类型之Integer与int

    数据类型之Integer与int Java入门  基本数据类型 众所周知,Java是面向对象的语言,一切皆对象.但是为了兼容人类根深蒂固的数据处理习惯,加快常规数据的处理速度,提供了9种基本数据类型, ...

  7. VSTO之PowerPoint(PPT)插件开发常用API汇总

    VSTO简介 VSTO(Visual Studio Tools for Office )是VBA的替代,使得开发Office应用程序更加简单,并且用VSTO来开发office应用程序可以使用Visua ...

  8. Java编程基础阶段笔记 day 07 面向对象编程（上）

    ​ 面向对象编程 笔记Notes 面向对象三条学习主线 面向过程 VS 面向对象 类和对象 创建对象例子 面向对象的内存分析 类的属性:成员变量 成员变量 VS 局部变量 类的方法 方法的重载 可变个 ...

  9. 微信公众平台注册及AppID和AppSecret的获取

    一.注册公众平台 1.入口 浏览器搜索“微信公众平台”,进入官网,点右上角立即注册. 2.选择账号类型 注册前需要选择一个账号类型,共有4个账号类型可以选择,每种类型能提供不同的功能,功能区别见下图. ...

  10. FTP工具-FileZilla安装使用教程

    1.首先,百度搜索“FileZilla”,进入官网,下载地址:https://www.filezilla.cn/download/client  ,根据自己电脑配置去下载 2.下载本地,双击运行安装程 ...