夕阳落山图（js 夕阳下山）

直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>夕阳落山图</title><style>#xy{width: 150px;height: 150px;background:radial-gradient(orange 30%, yellow);box-shadow: 0px 0px 15px yellow inset;border-radius: 50%;}</style>
</head>
<body><button onclick="dian()">点击开始落山</button><div id="xy"></div></body>
</html>

JavaScript 代码

<script>var a,b;//创建两个变量，为太阳每次变化的位置function bt() {   var sd= document.getElementById('xy');if(a<=1800&&b<=900){             //太阳移动落下的最后位置sd.style.marginLeft=a+"px";         //太阳移动的值sd.style.marginTop=b+"px";a=a+25;         //每次移动的值b=b+10;}else{           //当太阳到达最后值时从新开始。a=0;b=0;}}var t;             //创建定时器function dian() {clearInterval(t);t=setInterval('bt()',500);}</script>

夕阳落山图（js 夕阳下山）相关推荐

android 地铁地图api,百度地铁图JS API使用
地铁路线规划嘉定西到虹桥火车站调用百度地铁图JS API示例 1使用之前也要申请百度地图JavaScript AP ak 2 添加一个div容器,用于地图的渲染位置起始位置: => 终点位 ...
怎么画地铁图 java_创建地铁图-地铁图显示-开发指南-地铁图 JS API | 高德地图API...
本章节将带您迅速了解地铁图 JS API的基本使用,学习如何创建和设置地铁简易图,如何添加点标记.信息窗体,如何绑定事件,如何做路线规划,使您在最短时间内创建一个地铁图页面. 准备页面在正式开始开发 ...
android 地铁地图api,入门指南-地铁图 JS API | 高德地图API
入门指南将带您迅速了解地铁图 JS API的基本使用,学习如何以easy模式创建地铁简易图,使您在最短时间内创建一个地铁图页面. 准备页面在正式开始开发地图应用之前,您需要做如下几步: 申请JS A ...
学习响应式BootStrap来写融职教育网站，Bootsrtap第八天轮播图js特效
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
html图片自动循环轮播图,js实现图片无缝循环轮播
本文实例为大家分享了js实现图片无缝循环轮播的具体代码,供大家参考,具体内容如下代码如下 Document #container{ overflow:hidden; width:400px; hei ...
html5 自动扣图,js+html5 canvas实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
html小米官网轮播图js,小米官网轮播图js+css3+html实现
官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...
html5绘制股票图形,股票数据分析(五):绘制股票k线图(js+canvas + Python + json)
本文介绍:利用 js+canvas 绘制股票k线图 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来 ...
html 轮播切图,JS轮播图的实现方法
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图效果图: 思路通过编写过渡动画实现轮播效果,图片的出现 ...

夕阳落山图（js 夕阳下山）

夕阳落山图（js 夕阳下山）相关推荐

最新文章

热门文章