JavaScriptの求愛の特殊効果は次のとおりです。効果は次のとおりです。
下の写真の効果が表示されるだけでなく、図をマウスで回転させることもできます。これは、単純で変更されていない例です。この例に基づいて、求愛をより楽しくすることができます。気が進まない男性、あなたはあなたの小さなロリにそのようなウェブページを投稿できますか?素晴らしい。
コードを投稿してください:
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title>タイトルを挿入して</title>
<style type = "text/css">
体{
境界線:1px赤色の固体。
幅:1000px;
高さ:1000px;
マージン:0px auto;
パディング:0px;
色:緑;
}
/*
左、右、上、下部などのプロパティを使用して、ドキュメントストリームからオブジェクトをドラッグします。
絶対的なポジショニングのために、最も位置づけられている親オブジェクトに最も近い。そのような親オブジェクトが存在しない場合、
ボディオブジェクトによって。そして、そのカスケードはZ-Index属性によって定義されます
*/
div {
位置:絶対;
}
</style>
<script type = "text/javascript">
//なぜオンロードを使用する必要があるのですか? JavaScriptコードのクロックのDIVを初期化すると、デバッグページは実装がないことを発見したため
//後に、HTMLコードが前後に解析された理由を見つけました。 JavaScriptコードを最初に解析するときは、ボディに移動します
//子ノードを追加する場合、未解決のボディは見つかりません。したがって、最初に体を解析する必要があります。 2つの方法があります
//の書き込み方法は、別の方法で、オンロード方法をボディタグに追加することです。
window.onload = function(){
init();
};
// 12 divを保存するためにDiv配列を定義します
// 12のdiv位置間の関係のため、最初にdotと半径を決定してdivの位置を計算します
var divs = [];
var lovebaby = ["i"、 "love"、 "you"、 "you"、 "bao"、 "bei"、 "love"、 "love"、 "me"、 "wan"、 "wan"、 "wan" "wan" "wan" wan "" wan "" wa n "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "wan" "wan" "wan" "wan
var cx = 300;
var CY=300;//--------------------------------------------------------------------------------------------------------------------
var r = 150;
var divcenternode; //中心点の位置を制御し、グローバル変数を設定する必要があります
//初期化された関数を定義します
function init(){
//中心点位置でDivを作成します(求愛オブジェクトを書くことができます)
divcenternode = document.createelement( "div");
divcenternode.innerhtml = "チング、結婚してください!";
document.body.appendChild(divcenternode);
divcenternode.style.left =(cx-50)+"px";
divcenternode.style.top =(cy-30)+"px";
//禁止されている時計を形成して体内に置くために12個のdivを作成します
for(var x = 1; x <= 12; x ++){
// divを作成します
var divnode = document.createelement( "div");
divnode.innerhtml = lovebaby [x-1];
//ボディオブジェクトは他のオブジェクトのように取得する必要はなく、JSライブラリがカプセル化されています。
document.body.AppendChild(DivNode);
divs.push(divnode);
}
// startclock()がdiv要素を再配置するたびに開始されるたびに
/*
実際、回転効果を達成するには、継続的に相殺する必要があります。
再配置が、ループするが、関数を開始するのにどれくらいの時間がかかるかを制御することはできません。
この時点で、ウィンドウオブジェクトはメソッドを提供します。
*/
startclock();
}
// divのオフセット
var offset = 0; //程度オフセット
//位置に関数を定義し、位置を個別に回転させます
function startclock(){
for(var x = 1; x <= 12; x ++){
var div = divs [x-1];
//各番号の程度
var dushu = 30*x+offset;
//角度値* math.pi /180 = ray値
var Divleft = cx+r*math.sin(dushu*math.pi/180);
div.style.left = divleft+"px";
var divtop = cy-r*math.cos(dushu*math.pi/180);
div.style.top = divtop+"px";
}
オフセット+= 50;
//特定の間隔、この関数をコールバックします
//式は、指定されたミリ秒値の後に計算されます。最初のパラメーターは式、2番目のパラメーターは時間です
setimeout(startclock、80); //ウィンドウオブジェクトの方法
}
//マウスが動くときにこのクロックを異なる位置に定義します
functionclockmove(event){
cx = event.clientx; //マウスの位置のX座標
cy = event.clienty; //マウスの位置のy座標
divcenternode.style.left =(cx-50)+"px";
divcenternode.style.top =(cy-30)+"px";
}
</script>
</head>
<body onmousemove = "clockmove(event)">
<! -
1.円に12の数字を表示します
1/12 divを作成し、それぞれ値1-12を割り当てます
2/12 divを見つけて円を形成します。
- >
</body>
</html>
私はもともと、回転して実行できる時計ディスプレイを作りたかったのです。したがって、コードの命名は時計に関連しているので、私は混乱することはありません、親愛なる。 JavaScriptの初心者、JavaScriptは非常に強力だと感じています。