suchen
HeimWeb-Frontendjs-TutorialSo erstellen Sie heute VR im Web

So erstellen Sie heute VR im Web

Die virtuelle Realität wird bis 2020 bis zu 7 Milliarden US -Dollar wert sein. Das Web wird in dieser Zeit definitiv keine ausschließlich 2D -Umgebung bleiben. Tatsächlich gibt es bereits einige einfache Möglichkeiten, VR in den Browser zu bringen. Es macht auch unglaublich Spaß, mit!

zu arbeiten

Um Ihr Entwicklungsabenteuer im virtuellen Web zu beginnen, gibt es drei potenzielle Möglichkeiten, dies zu tun:

    JavaScript, drei.js und Beobachtung der Geräteorientierung
  • javaScript, drei.js und webvr
  • (meine neue bevorzugte Methode!)
  • CSS und WebVR
  • (noch sehr frühe Tage)
Ich gehe über jeden ein und zeige eine kurze Zusammenfassung der Funktionsweise.

Key Takeaways

    Virtual Reality (VR) kann durch drei Hauptmethoden in die Webentwicklung aufgenommen werden: JavaScript, drei.js und Beobachtung der Geräteorientierung; JavaScript, drei.js und WebVR; und CSS und Webvr.
  • Die Methode JavaScript, Drei.Js und Beobachtungsgeräteorientierung verwendet das Gerätetechnik -Browser -Ereignis, um die Drehung und Neigung der Geräte zu erkennen, die in einem VR -Kontext die Einstellung der Kamera ermöglicht, dem Blick des Betrachters zu folgen.
  • javaScript, drei.js und webvr sind eine experimentelle Methode, die derzeit am besten für den Zugriff auf VR -Headset -Orientierung wie den Oculus Rift geeignet ist. Es verwendet die WebVR -API, um Zugriff auf VR -Geräteinformationen zu erhalten.
  • Die CSS- und WebVR -Methode, derzeit in frühen Entwicklungsstadien, zielt darauf ab, CSS 3D -Transformationen in den VR -Vollbildmodus zu integrieren.
  • Erstellen von VR -Erlebnissen für das Web wird als wichtiger Treiber für die Einführung der VR -Technologie angesehen, wobei die WebVR -Kesselplatte von Boris Smus als der beste Ort für Entwickler empfohlen wird, um ein VR -Erlebnis für das Web aufzubauen.
JavaScript, drei.js und Beobachtung der Geräteorientierung

Eine Art und Weise, wie die meisten Browser -basierten Virtual -Reality -Projekte derzeit funktionieren, ist das Geräte -Browser -Ereignis. Dies teilt dem Browser mit, wie das Gerät ausgerichtet ist, und ermöglicht es dem Browser, wenn es gedreht oder geneigt wurde. Diese Funktionalität innerhalb einer VR -Perspektive ermöglicht es Ihnen, zu erkennen, wenn sich jemand umsieht und die Kamera anpasst, um ihrem Blick zu folgen.

Um eine wundervolle 3D -Szene innerhalb des Browsers zu erreichen, verwenden wir drei.js, ein JavaScript -Framework, das es einfach macht, 3D -Formen und -szenen zu erstellen. Es nimmt den größten Teil der Komplexität heraus, ein 3D -Erlebnis zusammenzustellen, und ermöglicht es Ihnen, sich auf das zu konzentrieren, was Sie in Ihrer Szene zusammenstellen möchten.

Ich habe hier an SitePoint zwei Demos geschrieben, die die Geräteorientierungsmethode verwenden:

  • VR mit Google Cardboard und drei.js
  • ins Web bringen
  • ins Web.
Visualisieren eines Twitter -Streams in VR mit drei.js und Knoten

Wenn Sie neu zu drei.Js sind und wie man eine Szene zusammenstellt, empfehle ich, mich die beiden oben genannten Artikel für eine ausführlichere Einführung in diese Methode anzusehen. Ich werde hier Schlüsselkonzepte behandeln, aber es wird auf einer höheren Ebene sein.

    Die Schlüsselkomponenten jeder dieser diese umfassen die folgenden JavaScript -Dateien (Sie können diese Dateien aus den oben genannten Beispiel -Demos abrufen und finden sie auch in den Drei.js -Beispielen Download):
  • drei.min.js - Unser drei.js Framework
  • DeviceorientationControls.js - Dies ist das drei.js -Plugin, das die oben diskutierte Geräteorientierung liefert. Es bewegt unsere Kamera, um die Bewegungen unseres Geräts zu erfüllen.
  • orbitcontrols.js - Dies ist ein Sicherungscontroller, mit dem der Benutzer die Kamera mit der Maus bewegen kann, wenn wir kein Gerät haben, das Zugriff auf das Geräteorientierungsereignis hat.
stereoeffect.js - Ein Drei.js -Effekt, der den Bildschirm in ein stereoskopisches Bild aufteilt, das für jedes Auge etwas anders ist, genau wie in VR. Dadurch wird der tatsächliche VR -Split -Bildschirm erstellt, ohne dass wir etwas Kompliziertes tun müssen.

Geräteorientierung

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>
Der Code zum Aktivieren der Geräteorientierungsteuerungen sieht so aus:

Der Listener für GeräteOrientierungsereignisse bietet einen Alpha-, Beta- und Gamma -Wert, wenn er über ein kompatibles Gerät verfügt. Wenn wir keinen Alpha -Wert haben, ändert dies unsere Steuerelemente nicht für die Verwendung der Geräteorientierung, sodass wir stattdessen Orbit -Steuerelemente verwenden können.

Wenn er diesen Alpha -Wert hat, erstellen wir eine Steuerungssteuerung für Geräteorientierungen und geben ihm unsere Kamera -Variable zur Steuerung an. Wir setzen es auch so, dass wir unsere Szene auf Vollbild setzen, wenn der Benutzer auf den Bildschirm klopft (wir möchten nicht auf die Adressleiste des Browsers in VR starren).

Orbit Controls

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>
Wenn dieser Alpha -Wert nicht vorhanden ist und wir keinen Zugriff auf das Geräteorientierungsereignis haben, bietet diese Technik stattdessen ein Steuerelement, um die Kamera durch Ziehen mit der Maus zu bewegen. Das sieht so aus:

Die wichtigsten Dinge, die aus dem obigen Code verwirrend sein könnten, sind Nopan und Nozoom. Grundsätzlich möchten wir uns nicht über die Maus um die Szene bewegen und wir möchten nicht in der Lage sein, ein- oder auszoomen - wir möchten uns nur umsehen.

Stereo -Effekt

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>
Um den Stereo -Effekt zu verwenden, definieren wir ihn so:

effect<span>.setSize(width, height);</span>
Dann aktualisieren wir in der Größe des Fensters seine Größe:

effect<span>.render(scene, camera);</span>
In jedem RequestAnimationFrame setzen wir die Szene, um unsere Wirkung durchzusetzen:

Das sind die Grundlagen, wie der Geräteorientierungsstil des Erzählens von VR funktioniert. Es kann für eine schöne und einfache Implementierung mit Google Cardboard effektiv sein, ist jedoch für den Oculus Rift nicht ganz effektiv. Der nächste Ansatz ist für den Riss viel besser.

javaScript, drei.js und webvr

Möchten Sie wie der Oculus Rift auf VR -Headset -Orientierung zugreifen? WebVR ist im Moment der Weg, dies zu tun. WebVR ist eine frühe und experimentelle JavaScript -API, die Zugriff auf die Funktionen von Virtual -Reality -Geräten wie Oculus Rift und Google Cardboard bietet. Derzeit ist es in Firefox -Nacht und ein paar experimentelle Builds von mobilem Chrom und Chrom erhältlich. Eine Sache, die Sie beachten sollten, ist, dass die Spezifikation immer noch im Entwurf steht und sich ändern kann. Experimentieren Sie also damit, aber wissen Sie, dass Sie möglicherweise die Dinge im Laufe der Zeit anpassen müssen.

Insgesamt bietet die WebVR -API Zugriff auf die VR -Geräteinformationen über:

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Ich werde hier nicht auf viele technische Details eingehen (ich werde dies in einem eigenen zukünftigen SitePoint -Artikel genauer behandeln!), Wenn Sie mehr herausfinden möchten, lesen Sie den Entwurf des WebVR -Editors. Der Grund, warum ich damit nicht ins Detail gehe, ist, dass es eine viel einfachere Methode zur Implementierung der API gibt.

Diese oben genannte Methode zur Implementierung der WebVR -API besteht darin, die WebVR -Kesselplatte von Boris Smus zu verwenden. Es bietet ein gutes Maß an Basisfunktionalität, die WebVR implementiert und die Erfahrung für verschiedene Geräte anmutig verschlechtert. Es ist derzeit die schönste Web -VR -Implementierung, die ich gesehen habe. Wenn Sie ein VR -Erlebnis für das Web erstellen möchten, ist dies derzeit der beste Startort!

Um diese Methode zu verwenden, laden Sie die WebVR -Boilerplate auf GitHub herunter.

Sie können sich auf die Bearbeitung des Index.html und die Verwendung aller Dateien in dieser Einrichtung konzentrieren oder die spezifischen Plugins von Grund auf in Ihr eigenes Projekt implementieren. Wenn Sie die Unterschiede in jeder Implementierung vergleichen möchten, habe ich meine Visualisierung eines Twitter -Streams in VR mit drei.js- und Knotenbeispielen in einen WebVR -Twitter -Stream in VR.

migriert

, um dieses Projekt von Grund auf selbst in Ihre eigenen einzubeziehen, die Dateien, die Sie haben möchten, sind:

  • drei.min.js - Unser drei.js -Framework natürlich
  • vrcontrols.js - Ein Drei.js -Plugin für VR -Steuerelemente über WebVR (dies finden Sie in Bower_Components/ThreeJS/Beispiele/JS/Controls/Vrcontrols.js im Boilerplate -Projekt)
  • vreffect.js - Ein Drei.js -Plugin für den VR -Effekt selbst, der die Szene für einen Oculus -Rift anzeigt (dies finden Sie in Bower_Components/ThreeJS/Beispiele/js/effekte/vreffect.js im Boilerplate -Projekt)
  • webvr-polyfill.js-Dies ist eine Polyfill für Browser, die WebVR noch nicht vollständig unterstützt Code)
  • webvr-Manager.js-Dies ist Teil des Boilerplate-Codes, der alles für Sie verwaltet, einschließlich der Bereitstellung einer Möglichkeit, den VR-Modus einzugeben und zu beenden (dies finden Sie in Build/webvr-Manager.js)

implementiert es erfordert nur wenige Anpassungen aus der Geräteorientierungsmethode. Hier ist eine Übersicht für diejenigen, die diese Methode ausprobieren möchten:

Steuerelemente

Die VR -Steuerelemente sind recht einfach eingerichtet. Wir können einfach ein neues VRControls -Objekt der zuvor verwendeten Steuerelemente zuweisen. Die Steuerelemente und Geräteorientierungssteuerungen sollten nicht erforderlich sein, da die Kesselplatte nun ohne VR -Funktionen für Browser sorgen sollte. Dies bedeutet, dass Ihre Szene auch auf Google Cardboard auch immer noch recht gut funktionieren sollte!
<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

vr effekt

Der Effekt ist der Implementierung sehr ähnlich wie die Stereoeffect. Ersetzen Sie diesen Effekt einfach durch unseren neuen Vreffect One:

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

wir machen diesen Effekt jedoch nicht in dieser Methode durch. Stattdessen machen wir unseren VR -Manager durch.

VR Manager

Der VR -Manager kümmert sich um all unsere VR, die in das Eintritt/Verlassen und so weiter eintritt, also wird hier unsere Szene endlich gerendert. Wir haben es zunächst über Folgendes eingerichtet:

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

Der VR -Manager bietet eine Taste, mit der der Benutzer den VR -Modus eingeben kann, wenn er sich in einem kompatiblen Browser befindet, oder Vollbild, wenn sein Browser nicht in der Lage ist, VR zu erhalten (Vollbild ist das, was wir für Mobilgeräte wollen). Der Parameter aus Versteck sagt, ob wir diese Taste ausblenden möchten oder nicht. Wir wollen es definitiv nicht verbergen!

Unser Render -Anruf sieht dann so aus, dass es eine Zeitstempelvariable verwendet, die aus unserer update () -Funktion von drei.js () stammt:

effect<span>.setSize(width, height);</span>

Mit all dem, dass Sie eine funktionierende VR -Implementierung haben, die sich je nach Gerät in verschiedene Formate übersetzt.

.

wird Renderer.getSize () einen Fehler zurückgeben? Dies hat mich für ein paar Stunden verrückt gemacht, aber alles, was Sie tun müssen, um dies zu beheben, ist: Aktualisieren Sie drei.js!

Wie sieht die WebVR -Boilerplate in Aktion

aus

Hier ist die Ansicht meines Twitter -Beispiels auf einem Browser, der VR unterstützt: So erstellen Sie heute VR im Web

Hier ist es in der Oculus Rift -Ansicht, die angezeigt wird, wenn Sie auf das VR -Symbol klicken:

So erstellen Sie heute VR im Web

So sieht die Ansicht auf einem Smartphone aus, die Geräteorientierung ermöglicht es uns immer noch, sich in der Szene umzusehen, und wir haben keinen geteilten Bildschirm. Eine großartige Reaktionsansicht des Inhalts:

So erstellen Sie heute VR im Web

Wenn wir auf dem VR -Symbol auf Mobilgeräten klicken, erhalten wir eine Vollbildansicht für Google Cardboard -Stilgeräte:

So erstellen Sie heute VR im Web

CSS und WebVR

Mozilla will auch VR -Betrachtungsfähigkeiten in den Browser in den Nachtversionen von Firefox bringen, aber es sind ziemlich frühe Tage! Ich hatte nicht viel Glück, es auf meinem Mac und Oculus eingerichtet zu haben. Die Arten von Konventionen, die Vladimir Vukićević von Firefox erwähnt hat, umfasst die Integration von CSS 3D mit dem VR -Vollbildmodus.

als Beispiel aus Vladimirs Blog-Beitrag sagt er, dass Elemente mit Transform-Stil: Preserve-3D zweimal von den beiden Standpunkten aus rendern sollten, um es in VR:

zu bringen
<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Wenn Sie Demos mit VR und CSS kennen, lassen Sie es mich bitte wissen! Ich konnte keine Aufspürung aufspüren. Die Idee, den HTML- und CSS -Teil des Web in VR zu bringen, ist ohne Zweifel ein wirklich faszinierendes Konzept. Es ist unvermeidlich, dass das Web irgendwann in das VR -Bereich eingeht, da wir uns alle langsam auf VR -Geräte wechseln!

Schlussfolgerung

Die Welt der Technologie wird in den kommenden Jahren langsam aber sicher die virtuelle Realität annehmen, da unsere technologischen Fähigkeiten mit unseren wilden Bestrebungen übereinstimmen! Das einzige, was die VR -Akzeptanz und ihr Wert vorantreiben wird, ist Inhalt. Wir müssen VR -Inhalte für VR -Nutzer herausholen, um es zu genießen! Was gibt es Schöneres und einfacher als über das Web?

Wenn Sie den Sprung wagen und eine VR -Demo mit diesem Code erstellen, teilen Sie ihn bitte in den Kommentaren oder wenden Sie sich auf Twitter (@thatpatrickGuy) mit mir in Verbindung. Ich würde gerne meinen Oculus Rift oder Google Cardboard anziehen und ihn für einen Spin!

nehmen

Ich habe eine Reihe von kuratierten Links zu VR und AR über JavaScript für diejenigen, die nach einer kurzen Referenz suchen. Besuchen Sie Dev Diner und schauen Sie sich mein Dev Diner VR und AR mit dem JavaScript -Entwicklerhandbuch an, voller in diesem Artikel erwähnter Links, anderen großartigen SitePoint -Artikeln und mehr. Wenn Sie andere großartige Ressourcen haben, die ich nicht aufgelistet habe, lassen Sie es mich bitte auch wissen!

häufig gestellte Fragen zum Erstellen von VR im Web

Was sind die Voraussetzungen, um VR im Web zu erstellen? Sie sollten auch mit WebGL vertraut sein, einer JavaScript -API zum Rendern von 2D- und 3D -Grafiken. Das Wissen von drei.js, einer beliebten JavaScript -Bibliothek zum Erstellen von 3D -Grafiken, ist ebenfalls von Vorteil. Darüber hinaus sollten Sie über ein VR-Headset verfügen, um Ihre VR-Erlebnisse zu testen. Seien Sie verwendet, um VR -Erlebnisse zu erstellen. Drei.js vereinfacht den Prozess der Arbeit mit WebGL, während Sie mit A-Frame VR-Szenen mithilfe der HTML-ähnlichen Syntax erstellen können. Mit diesen Tools können Sie 3D -Objekte erstellen, Texturen und Beleuchtung hinzufügen und die Kamerabewegungen steuern. Dies bietet Unterstützung für verschiedene Virtual -Reality -Geräte wie Oculus Rift, HTC Vive und Google Cardboard in einem Webbrowser. Es ermöglicht den Entwicklern, immersive VR -Erlebnisse im Web zu erstellen, auf die jeder mit einem VR -Gerät und einem kompatiblen Browser zugänglich ist. 🎜> JavaScript ist die primäre Sprache für die Webentwicklung, einschließlich VR. Sie können jedoch Sprachen verwenden, die zu JavaScript kompilieren, wie z. B. TypeScript oder Coffeescript. Darüber hinaus können Sie mit WebAssembly den Code ausführen, der in Sprachen wie C mit nahezu nativer Geschwindigkeit im Browser geschrieben wurde.

Wie kann ich meine VR-Erlebnisse für das Web optimieren? Das Web beinhaltet die Reduzierung der Latenz, die effiziente Verwaltung des Speichers und die Optimierung des Renders. Sie können Techniken wie asynchrones Laden, Texturkomprimierung und Detailniveau (LOD) verwenden, um die Leistung zu verbessern. Berücksichtigen Sie außerdem die Einschränkungen der Hardware- und Netzwerkbedingungen des Benutzers. Sie können beispielsweise die API von Deviceorientation verwenden, um den Benutzern die VR -Szene zu erkunden, indem sie ihr mobiles Gerät verschieben. Sie können auch eine 360-Grad-Ansicht bereitstellen, die Benutzer mit Maus oder Berührung navigieren können.

Wie kann ich meine VR-Erlebnisse im Web testen? VR -Headset. Wenn Sie kein Headset haben, können Sie die WebVR -Emulatorerweiterung für Chrome und Firefox verwenden. Dieses Tool simuliert die WebVR-API und bietet eine 3D-Ansicht der VR-Szene. In drei.Js, um Ihre 3D-Modelle in einem Format zu exportieren, das A-Frame lesen kann. GLTF (GL -Transmissionsformat) ist ein Standard -Dateiformat für 3D -Szenen und -modelle.

Was sind einige Herausforderungen, denen ich beim Erstellen von VR im Web stehen könnte? Darüber hinaus kann das Erstellen von realistischen 3D -Grafiken und -Animationen komplex sein.

Wo kann ich mehr über das Erstellen von VR im Web erfahren? Die WebVR -Dokumentation von Mozilla ist ein guter Ausgangspunkt. Sie können auch Tutorials und Beispiele auf den drei.js- und a-Frame-Websites ansehen. Darüber hinaus gibt es zahlreiche Online -Communities, in denen Sie Fragen stellen und Ihre Arbeit teilen können.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie heute VR im Web. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Ersetzen Sie Stringzeichen in JavaScriptErsetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AM

Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi

8 atemberaubende JQuery -Seiten -Layout -Plugins8 atemberaubende JQuery -Seiten -Layout -PluginsMar 06, 2025 am 12:48 AM

Nutzen Sie JQuery für mühelose Webseiten -Layouts: 8 Essential Plugins JQuery vereinfacht das Webseitenlayout erheblich. In diesem Artikel werden acht leistungsstarke JQuery -Plugins hervorgehoben, die den Prozess optimieren, insbesondere nützlich für die manuelle Website -Erstellung

Erstellen Sie Ihre eigenen AJAX -WebanwendungenErstellen Sie Ihre eigenen AJAX -WebanwendungenMar 09, 2025 am 12:11 AM

Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt

Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Mar 18, 2025 pm 03:12 PM

In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

Laden Sie den Inhalt des Box dynamisch mit AJAXLaden Sie den Inhalt des Box dynamisch mit AJAXMar 06, 2025 am 01:07 AM

Dieses Tutorial zeigt, dass dynamische Seitenfelder über AJAX geladen werden und sofortige Aktualisierung ohne vollständige Seiten -Nachladen ermöglicht werden. Es nutzt JQuery und JavaScript. Betrachten Sie es als einen benutzerdefinierten Content-Box-Loader im Facebook-Stil. Schlüsselkonzepte: Ajax und JQuery

10 JQuery Fun- und Games -Plugins10 JQuery Fun- und Games -PluginsMar 08, 2025 am 12:42 AM

10 Fun JQuery Game -Plugins, um Ihre Website attraktiver zu machen und die Stickinität der Benutzer zu verbessern! Während Flash immer noch die beste Software für die Entwicklung von lässigen Webspielen ist, kann JQuery auch überraschende Effekte erzielen und zwar nicht mit reinen Action -Flash -Spielen vergleichbar sind, aber in einigen Fällen können Sie auch einen unerwarteten Spaß in Ihrem Browser haben. JQuery Tic Toe Game Die "Hello World" der Game -Programmierung hat jetzt eine Jquery -Version. Quellcode JQuery Crazy Word Kompositionsspiel Dies ist ein Spiel mit der Füllung, und es kann einige seltsame Ergebnisse erzielen, da das Wort nicht kennt. Quellcode JQuery Mine Sweeping Game

So schreiben Sie eine Cookie-Less-Sitzungsbibliothek für JavaScriptSo schreiben Sie eine Cookie-Less-Sitzungsbibliothek für JavaScriptMar 06, 2025 am 01:18 AM

Diese JavaScript -Bibliothek nutzt das Fenster.name -Eigenschaft, um Sitzungsdaten zu verwalten, ohne sich auf Cookies zu verlassen. Es bietet eine robuste Lösung zum Speichern und Abrufen von Sitzungsvariablen über Browser hinweg. Die Bibliothek bietet drei Kernmethoden: Sitzung

JQuery Parallax Tutorial - Animated Header HintergrundJQuery Parallax Tutorial - Animated Header HintergrundMar 08, 2025 am 12:39 AM

Dieses Tutorial zeigt, wie ein faszinierender Parallaxen -Hintergrundeffekt mit JQuery erstellt wird. Wir werden ein Header -Banner mit geschichteten Bildern bauen, die eine atemberaubende visuelle Tiefe erzeugen. Das aktualisierte Plugin funktioniert mit JQuery 1.6.4 und später. Laden Sie die herunter

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version