JavaScriptの求愛小さな特殊効果_JavaScriptスキル

ここでは、JavaScript の小さな求愛特殊効果が作成されます。その効果は次のとおりです。

下の図の効果が表示されるだけでなく、マウスの回転に図形を追従させることもできます。小さな未修正の例は、この例に基づいて求愛をより楽しくすることができます。男性、男性の皆さん、あなたの小さなロリにこのようなウェブページを送ってくれませんか?素晴らしい。

コードを貼り付けます:

コードをコピーします コードは次のとおりです:

ここにタイトルを挿入< ;/title> ;
によって定義されます。 /javascript ">
//onload が使用される理由は、JavaScript コードでクロック div を初期化したときに、デバッグ ページでそれが実装されていないことが判明したためです。
//後でその理由が分かりました。htmlコードは前から後ろに解析されます。 JavaScript コードが最初に解析されるとき、ボディ
// に子ノードを追加するときに、解析されていないボディが見つかりません。したがって、最初に本体を解析する必要があります。
//を記述する方法と、bodyタグ内にonloadメソッドを追加する方法があります。
window.onload=function(){
init();
};
//12 div を格納する div 配列を定義します
//12 div の位置関係があるため、最初にdiv の位置を計算するための点と半径を決定します。
var divs=[]
var loveBaby=["I","love","你","!","宝","贝" ","你","爱","我","我","ミアン","ミアン"]
var CX=300;
var CY=300;//-- ---- ----------------Web ページには位置座標の単位はありませんか?
var R=150;
var divCenterNode;//中心点の位置を制御するには、グローバル変数を設定します
//初期化関数を定義します
function init(){
/ / 中心点に div を作成します (求愛オブジェクトを記述できます)
divCenterNode=document.createElement("div");
divCenterNode.innerHTML="ティンティング、結婚してください!"; body.appendChild(divCenterNode);
divCenterNode.style.left=(CX-50) "px";
divCenterNode.style.top=(CY-30) "px"; div を使用して禁止されたクロックを形成し、本体に配置します。
for(var x=1;x<=12;x ){
//div を作成します
var divNode=document.createElement(" div" );
divNode.innerHTML=loveBaby[x-1];
//body オブジェクトは他のオブジェクトのように取得する必要はなく、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 = ラジアン値
var divLeft = CX R*Math.sin(dushu*Math .PI /180);
div.style.left=divLeft "px";
var divTop = CY-R*Math.PI/180); divTop "px";
}
offset =50;
//一定の間隔でこの関数を呼び出します
//指定されたミリ秒値の後に式を計算します。最初のパラメータは式で、2 番目のパラメータは時間です。
setTimeout(startClock,80);//ウィンドウ オブジェクトのメソッド
}
//マウスの移動に応じてこのクロックを別の位置に移動するように定義します
function ClockMove(event){
CX=event.clientX;//マウス位置のx座標
CY=event.clientY;//マウス位置のy座標
divCenterNode.style. left=(CX-50) "px";
divCenterNode.style.top=(CY-30) "px";

}
head>





元々は回転して動く時計の表示を作りたかったのです。したがって、コード内の名前は時計に関連しているので、心配する必要はありません。私は JavaScript を初めて使用しますが、JavaScript は非常に強力だと感じています。