javascript实现旋转罗盘完整代码
本代码实现罗盘定时按随机数转过若干角度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>指南针</title>
<meta name="description" content="User page" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.div {
width:163px;
height:163px;
position:absolute;
top:100px;
left:300px;
}
.bg1 {
background-image: url("./bg1.png");
}
.bg2 {
}
img_compass {
transform:rotate(0deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}
</style>
</head>
<body>
<div class="div bg1">
<div class="bg2">
<img src="./bg2.png" id="compass" width="163px" height="163px" />
</div>
</div>
<script type="text/javascript">
var curDegree = 0;
var targetDegree = 0; /*change the degree*/
/* var targetDegree = 361;*/
function rotateTo (degree){
var target = document.getElementById("compass");
target.style.transform = "rotate(" + degree + "deg)";
target.style.webkitTransform = "rotate(" + degree + "deg)";
target.style.OTransform = "rotate(" + degree + "deg)";
target.style.MozTransform = "rotate(" + degree + "deg)";
curDegree = degree;
}
//随机数产生函数
function ran_num(){
var number = Math.random();
number = Math.ceil(number * 360);
return(number);
}
function rotate(degree){
var acc = 5;
var gap = degree - curDegree;
if (gap > 0) {
var delta = gap / acc;
//alert(delta);
if(delta > 0.05){
rotateTo(curDegree + delta);
setTimeout(function () {
rotate(degree);
}, 10);
}else rotateTo(degree);
}
if (gap < 0) {
var delta = gap / acc;
//alert(delta);
if(delta < (-0.05)){
rotateTo(curDegree + delta);
setTimeout(function () {
rotate(degree);
}, 10);
}else rotateTo(degree);
}
//else if(gap==0){
// targetDegree = targetDegree + curDegree;
// }
}
setInterval("targetDegree=ran_num();rotate(targetDegree);",1000);
</script>
</body>
</html>
javascript实现旋转罗盘完整代码相关推荐
- H5+JavaScript 剪刀石头布小游戏完整代码
效果图:(单局游戏中可计数) 刚学JavaScript的时候做的,槽点太多了,就图一乐,别太较真 有精力的朋友可以自行改成jQuery版或者其他精简又高效写法,我比较懒就不改啦 HTML: <! ...
- html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
- java代码实现打气球游戏_关于javascript和css3开发打气球小游戏的完整代码
这篇文章主要介绍了关于javascript和css3开发打气球小游戏的完整代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码, ...
- Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果 二.Three.js简介 三.Three.js代码正常运行显示条件 (1)不载入 ...
- JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
- Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...
- Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
- 太空人时间HTML,基于JavaScript实现网红太空人表盘的完整代码
一.效果展示 用javascript写的一个太空人表盘. 二.源代码 html代码 太空人表盘 function WatchMeter() { // 初始化dom this._initDom() // ...
- JavaScript实现网页计时器(有完整代码)
文章目录 一.如何实现倒计时的功能? 效果图 项目思路 二.完整代码 一.如何实现倒计时的功能? 效果图 项目思路 先搭建好如下的框架.其中<input type="text" ...
最新文章
- 如何向亲戚们解释人工智能可以干啥？
- R语言e1071包中的支持向量机：构建nu-classification类型的支持向量机SVM并分析不同nu值惩罚下模型分类螺旋线型（sprials）线性不可分数据集的表现
- 真正理解线程上下文类加载器（多案例分析）
- Mac安装MySql 5.7.11
- 谈谈java的BlockingQueue
- 从GBIP到PXI 的发展简史
- trados怎么导出html,【转】Trados 基本知识、使用技巧与经验
- MySql查询系统时间，SQLServer查询系统时间，Oracle查询系统时间
- mysql默认时间怎么不同步_MYSQL 更新时间自动同步与创建时间默认值共存问题
- Linux中对两文件处理
- 如何添加二级标题_怎样给Word文档添加目录？
- 苹果新一代 AirPods 能活过两年吗？
- 干货分享：如何挑选一款高效的原型工具？
- 画三线格子的高效方法，不用再一个格子一个格子的选中啦
- Android 基础知识之 VelocityTracker使用（提供手指速度计算，可用于笔迹优化哦）
- vs2015升级旧工程报snprintf已有主体及“int8_t” 重定义
- 转]自己开心一下！！！很轻松的~
- 大数据第一课（满分作业）——泰坦尼克号生存者预测（Titanic - Machine Learning from Disaster）
- newcoder 筱玛的迷阵探险（搜索 + 01字典树）题解
- 如何选出一名优秀的项目经理？