我一直在论坛中寻找答案,但仍然陷入困境。
我创建了一个按钮,其 onclick 属性指向 stopRotation() 函数。
<button type="button" class="changeText" onclick="stopRotation();">Stop Rotation</button>
点击它后,会发生以下情况:
- 应用程序中的地球仪停止旋转(成功)
- 按钮上的文字从“停止旋转”更改为“开始旋转”(成功)
这是通过以下代码行实现的:
$(".changeText").click(function () {
$(this).text(function(i, v){
return v === 'Start Rotation' ? 'Stop Rotation' : 'Start Rotation'
})
});
var lastNow = Date.now();
function rotation(clock){
if(scene.mode == Cesium.SceneMode.SCENE3D){
var now = Date.now();
var spinRate = 0.08;
var delta = (now - lastNow) / 1000;
lastNow = now;
scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
}
}
function stopRotation(){
viewer.clock.onTick.removeEventListener(rotation);
}
现在按钮的文本设置为“开始旋转”,如何调用该函数以便在用户单击按钮后地球仪再次开始旋转?
function startRotation(){
viewer.clock.onTick.addEventListener(rotation);
}
提前谢谢您。
艾伦
最佳答案
由于您要调用点击监听器和函数,因此我将删除 onclick
调用并将所有逻辑移至您的点击监听器。
$(".changeText").click(function () {
$(this).text(function(i, v){
if (v === 'Start Rotation')
viewer.clock.onTick.addEventListener(rotation);
else
viewer.clock.onTick.removeEventListener(rotation);
return v === 'Start Rotation' ? 'Stop Rotation' : 'Start Rotation'
})
});
var lastNow = Date.now();
function rotation(clock){
if(scene.mode == Cesium.SceneMode.SCENE3D){
var now = Date.now();
var spinRate = 0.08;
var delta = (now - lastNow) / 1000;
lastNow = now;
scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
}
}
关于javascript - Onclick 更改按钮的名称和功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35008389/