Mong các anh em trên diễn đàn VFORUM giúp đỡ
tôi có HTML, có javascript, khi click chuột thì javascript được thực hiện
thay vào đó tôi muốn không click chuột mà lệnh tự động được thực hiện.
Kiểu như:
mong được giúp đỡ, xin cảm ơn!
tôi có HTML, có javascript, khi click chuột thì javascript được thực hiện
thay vào đó tôi muốn không click chuột mà lệnh tự động được thực hiện.
Kiểu như:
Mã:
<script type="text/javascript">
setTimeout( click, 0);
setTimeout( click, 10000);
</script>
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<style> *, *:before, *:after { box-sizing: border-box;}
html, body { height: 100%; overflow: hidden; background: #000;}
.split { width: 750px; height: 468px; position: absolute; top: 0%; left: 0%; -webkit-transform: translate(-0%, -0%); transform: translate(-0%, -0%); -webkit-perspective: 400px; perspective: 400px; cursor: pointer;}.split:before { content: ''; color: #777; letter-spacing: 1px; font-size: 10px; position: absolute; bottom: -30px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%);}.split img { height: auto; width: 100%; opacity: 0;}.split div { position: absolute; z-index: 1; background-repeat: no-repeat; -webkit-transform: rotateY(-50deg) scale(0.5); transform: rotateY(-50deg) scale(0.5); opacity: 0; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 0.6s cubic-bezier(0.71, 0.05, 0.09, 0.91); transition: all 0.6s cubic-bezier(0.71, 0.05, 0.09, 0.91);}.split.active div { opacity: 1; -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0);}
</style>
<body>
<div class="split active">
<img src="https://github.com/supahfunk/supah-codepen/blob/master/stcz-1.png?raw=true" />
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type="text/javascript">
var Split = function() {
this.$t = $(".split");
this.gridX = 20;
this.gridY = 20;
this.w = this.$t.width();
this.h = this.$t.height();
this.img = $("img", this.$t).attr("src");
this.delay = 0.05;
this.create = function() {
$("div", this.$t).remove();
for (x = 0; x < this.gridX; x++) {
for (y = 0; y < this.gridY; y++) {
var width = this.w / this.gridX * 101 / this.w + "%",
height = this.h / this.gridY * 101 / this.h + "%",
top = this.h / this.gridY * y * 100 / this.h + "%",
left = this.w / this.gridX * x * 100 / this.w + "%",
bgPosX = -(this.w / this.gridX * x) + "px",
bgPosY = -(this.h / this.gridY * y) + "px";
$("<div />")
.css({
top: top,
left: left,
width: width,
height: height,
backgroundImage: "url(" + this.img + ")",
backgroundPosition: bgPosX + " " + bgPosY,
backgroundSize: this.w + "px",
transitionDelay: x * this.delay + y * this.delay + "s"
})
.appendTo(this.$t);
}
}
};
this.create();
this.$t
.on("click", function() {
$(this).toggleClass("active"); })
.click();
};
window.onload = function() {
var split = new Split();
var gui = (function datgui() {
var gui = new dat.GUI();
gui.add(split, "gridX", 1, 20).step(1).onChange(function(newValue) {
split.create();
});
gui.add(split, "gridY", 1, 20).step(1).onChange(function(newValue) {
split.create();
});
gui.add(split, "delay", 0, 0.3).step(0.01).onChange(function(newValue) {
split.create();
});
return gui;
})();
};
</script>
</body>
</html>
