扫描二维码下载沐宇APP

沐宇

微信扫码使用沐宇小程序

沐宇

js鎬庝箞瀹炵幇寮瑰箷鍔熻兘

扬州沐宇科技
2021-04-20 17:15:52
js

js瀹炵幇寮瑰箷鍔熻兘鐨勬柟娉曪細1銆佸垱寤篽tml鏂囦欢锛?銆佹坊鍔爃tml浠g爜鏋舵瀯锛?銆佸湪body鏍囩涓娇鐢╠iv銆乮nput銆乥utton鏍囩鍒嗙粰椤甸潰璁捐鏁堟灉鏄剧ず妗嗐€佽緭鍏ユ銆佸脊骞曟彁浜ゆ寜閽紱4銆佹坊鍔爏cript鏍囩骞跺啓鍏s浠g爜鏉ュ疄鐜板脊骞曟晥鏋滐紱5銆侀€氳繃娴忚鍣ㄦ柟寮忔煡鐪嬭璁℃晥鏋溿€?/p>


js鎬庝箞瀹炵幇寮瑰箷鍔熻兘

鍏蜂綋鎿嶄綔鏂规硶锛?/p>

1.棣栧厛鍒涘缓涓€涓猦tml鏂囦欢銆?/p>

2.鍦╤tml鏂囦欢涓坊鍔爃tml浠g爜鏋舵瀯銆?/p>

<!DOCTYPE html>

<html>

    <head>

<meta charset="UTF-8">

        <title>寮瑰箷鍔熻兘</title>

    </head>

    <body>

    </body>

</html>

3.鐒跺悗鍦╤tml浠g爜鏋舵瀯涓殑body鏍囩閲岄潰浣跨敤div銆乮nput銆乥utton鏍囩鍒嗗埆缁欓〉闈㈣璁′竴涓晥鏋滄樉绀烘銆佽緭鍏ユ銆佸脊骞曟彁浜ゆ寜閽€?/p>

<div id="box" class="box"></div>

<input type="text" id="txt" />

<button onclick="send()">鍙戦€佸脊骞?lt;/button>

4.鍦╤tml鏋舵瀯涓殑html鏍囩閲岄潰娣诲姞script鏍囩骞跺啓鍏s浠g爜鏉ュ疄鐜板脊骞曟晥鏋溿€?br/>

<style>

   function $(str) {

return document.getElementById(str);

}

function send() {

var word = $('txt').value;

var span = document.createElement('span');

var top = parseInt(Math.random() * 500) - 20;

var color1 = parseInt(Math.random() * 256);

var color2 = parseInt(Math.random() * 256);

var color3 = parseInt(Math.random() * 256);

var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";

top = top < 0 ? 0 : top;

span.style.position = 'absolute';

span.style.top = top + "px";

span.style.color = color;

span.style.left = '500px';

span.style.whiteSpace = 'nowrap';

var nub = (Math.random() * 10) + 1;

span.setAttribute('speed', nub);

span.speed = nub;

span.innerHTML = word;

$('box').appendChild(span);

$('txt').value = "";

}

setInterval(move, 200);

function move() {

var spanArray = $('box').children;

for (var i = 0; i < spanArray.length; i++) {

spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';

}

}

  </style>

5.鏈€鍚庡彲閫氳繃娴忚鍣ㄦ柟寮忛槄璇籬tml鏂囦欢鏌ョ湅璁捐鏁堟灉銆?/p>

瀹屾暣绀轰緥浠g爜濡備笅锛?/p>

<!DOCTYPE html>

<html>

    <head>

<meta charset="UTF-8">

        <title>寮瑰箷鍔熻兘</title>

    </head>

    <body>

      <div id="box" class="box"></div>

<input type="text" id="txt" />

<button onclick="send()">鍙戦€佸脊骞?lt;/button>

    </body>

    <script>

      function $(str) {

return document.getElementById(str);

}

function send() {

var word = $('txt').value;

var span = document.createElement('span');

var top = parseInt(Math.random() * 500) - 20;

var color1 = parseInt(Math.random() * 256);

var color2 = parseInt(Math.random() * 256);

var color3 = parseInt(Math.random() * 256);

var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";

top = top < 0 ? 0 : top;

span.style.position = 'absolute';

span.style.top = top + "px";

span.style.color = color;

span.style.left = '500px';

span.style.whiteSpace = 'nowrap';

var nub = (Math.random() * 10) + 1;

span.setAttribute('speed', nub);

span.speed = nub;

span.innerHTML = word;

$('box').appendChild(span);

$('txt').value = "";

}

setInterval(move, 200);

function move() {

var spanArray = $('box').children;

for (var i = 0; i < spanArray.length; i++) {

spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';

}

}

    </script>

</html>


扫码添加客服微信