A voir également:
- Csguessr
- Editeur html - Télécharger - HTML
- Html download - Télécharger - HTML
- Image cliquable html ✓ - Forum Réseaux sociaux
- Br html ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
3 réponses
bonjour voici les infomations que vous m avez demandez et merci pour les indications que vous m avez deja apporté , de plus je ne trouve pas de doc sur le JS , voici le lien https://codepen.io/acauamontiel/pen/abpLEG
pour les erreurs du navigateur les voici :
Failed to load resource: net::ERR_FILE_NOT_FOUND DAYPBL__-webfont.woff2:1
Uncaught SyntaxError: Unexpected token '<' Js:1
et ici tout le code avec les modification et vos indications:
L html
le css
le JS:
pour les erreurs du navigateur les voici :
Failed to load resource: net::ERR_FILE_NOT_FOUND DAYPBL__-webfont.woff2:1
Uncaught SyntaxError: Unexpected token '<' Js:1
et ici tout le code avec les modification et vos indications:
L html
<!DOCTYPE html
<html>
<head>
<div id="base">
<meta charset="utf-8" />
<link rel="stylesheet" href="css/Forme.css" />
<link rel="icon" type="image/png" sizes="32x32" href="guessrlogo.png">
<script src="Js/Name.js" > </script>
<title>CsGuessr </title>
</head>
<body>
<header>
<nav class="menu nav">
<img src="css/img/title.png"/>
<ul id="menu_nav">
<li><a href="zzzzz">GuessIT</a></li>
<li><a href="zzzzz">soon</a></li>
<li><a href="zzzzz">soon</a></li>
<li><a href="zzzzz">soon</a></li>
<li><a href="zzzzz">soon</a></li>
</ul>
</nav>
</header>
<p style="text-align:center"> <img alt="pp" src="css/img/pp.png"> </p>
<canvas></canvas>
<p id="intro"> <img alt="pp" src="css/img/pp.png" width="500" height="200" /> <br> filou dodu
<footer></footer>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
<script src="D:\travail\codage\NTF\Js"></script>
</body>
</html>
le css
@font-face {
font-family: 'dayposterblackregular';
src: url('police/DAYPBL__-webfont.eot');
src: url('police/DAYPBL__-webfont.eot?#iefix') format('embedded-opentype'),
url('police/css/police/DAYPBL__-webfont.woff2') format('woff2'),
url('police/DAYPBL__-webfont.woff') format('woff'),
url('police/DAYPBL__-webfont.ttf') format('truetype'),
url('police/DAYPBL__-webfont.svg#dayposterblackregular') format('svg');
font-weight: normal;
font-style: normal;
}
p
{
color: rgb(13, 177, 241);
font-family: 'dayposterblackregular' ;
}
h1
{
color:rgb(158, 106, 165);
font-family: 'dayposterblackregular' ;
background-color: rgb(17, 20, 20);
width: 300px
}
#intro
{
text-decoration: underline;
}
body {
overflow: hidden;
background: #111;
}
mark
{
/* La couleur de fond prend le pas sur celle de toute la page */
background-color: red;
color: black;
}
nav {
display: flex;
}
#menu_nav
{
list-style-type: none;
display: flex;
margin: 0 auto;
}
nav li
{
margin-right: 15%;
justify-content: flex-end;
}
nav a
{
font-size: 1.5em;
color: rgba(226,173,0,255);
padding-bottom: 5px;
text-decoration: none;
background-color: rgb(43,44,43);
padding:5%;
border-radius: 30px;
}
nav a:hover
{
font-size: 1.7em;
color: cadetblue;
background-color: whitesmoke;
border-radius: 40px;
}
le JS:
// Init Stats
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
/*!
* Mantis.js / jQuery / Zepto.js plugin for Constellation
* @version 1.2.2
* @author Acauã Montiel <***@***>
* @license http://acaua.mit-license.org/
*/
(function ($, window) {
var $window = $(window);
/**
* Makes a nice constellation on canvas
* @constructor Constellation
*/
function Constellation (canvas, options) {
var $canvas = $(canvas),
context = canvas.getContext('2d'),
defaults = {
star: {
color: 'rgba(255, 255, 255, .5)',
width: 1,
randomWidth: true
},
line: {
color: 'rgba(255, 255, 255, .5)',
width: 0.2
},
position: {
x: 0,
y: 0
},
width: window.innerWidth,
height: window.innerHeight,
velocity: 0.1,
length: 100,
distance: 120,
radius: 150,
stars: []
},
config = $.extend(true, {}, defaults, options);
function Star (){
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (config.velocity - (Math.random() * 0.5));
this.vy = (config.velocity - (Math.random() * 0.5));
this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width;
}
Star.prototype = {
create: function(){
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.fill();
},
animate: function(){
var i;
for (i = 0; i < config.length; i++) {
var star = config.stars[i];
if (star.y < 0 || star.y > canvas.height) {
star.vx = star.vx;
star.vy = - star.vy;
} else if (star.x < 0 || star.x > canvas.width) {
star.vx = - star.vx;
star.vy = star.vy;
}
star.x += star.vx;
star.y += star.vy;
}
},
line: function(){
var length = config.length,
iStar,
jStar,
i,
j;
for (i = 0; i < length; i++) {
for (j = 0; j < length; j++) {
iStar = config.stars[i];
jStar = config.stars[j];
if (
(iStar.x - jStar.x) < config.distance &&
(iStar.y - jStar.y) < config.distance &&
(iStar.x - jStar.x) > - config.distance &&
(iStar.y - jStar.y) > - config.distance
) {
if (
(iStar.x - config.position.x) < config.radius &&
(iStar.y - config.position.y) < config.radius &&
(iStar.x - config.position.x) > - config.radius &&
(iStar.y - config.position.y) > - config.radius
) {
context.beginPath();
context.moveTo(iStar.x, iStar.y);
context.lineTo(jStar.x, jStar.y);
context.stroke();
context.closePath();
}
}
}
}
}
};
this.createStars = function (){
var length = config.length,
star,
i;
context.clearRect(0, 0, canvas.width, canvas.height);
for (i = 0; i < length; i++) {
config.stars.push(new Star());
star = config.stars[i];
star.create();
}
star.line();
star.animate();
};
this.setCanvas = function (){
canvas.width = config.width;
canvas.height = config.height;
};
this.setContext = function (){
context.fillStyle = config.star.color;
context.strokeStyle = config.line.color;
context.lineWidth = config.line.width;
};
this.setInitialPosition = function (){
if (!options || !options.hasOwnProperty('position')) {
config.position = {
x: canvas.width * 0.5,
y: canvas.height * 0.5
};
}
};
this.loop = function (callback) {
callback();
this.rAF = window.requestAnimationFrame(function (){
stats.begin();
this.loop(callback);
stats.end();
}.bind(this));
};
this.handlers = {
window: {
mousemove: function(e){
config.position.x = e.pageX - $canvas.offset().left;
config.position.y = e.pageY - $canvas.offset().top;
},
resize: function (){
window.cancelAnimationFrame(this.rAF);
}
}
};
this.bind = function (){
$window
.on('mousemove', this.handlers.window.mousemove)
.on('resize', this.handlers.window.resize.bind(this));
};
this.unbind = function (){
$window
.off('mousemove', this.handlers.window.mousemove)
.off('resize', this.handlers.window.resize);
}
this.init = function (){
this.setCanvas();
this.setContext();
this.setInitialPosition();
this.loop(this.createStars);
this.bind();
};
}
function instantiate(element, options) {
var c = new Constellation(element, options);
c.init();
}
$.fn.constellation = function (options) {
return this.each(function (){
$window.on('resize', () => {
instantiate(this, options);
});
instantiate(this, options);
});
};
})($, window);
// Init plugin
$('canvas').constellation({
star: {
width: 3
},
line: {
color: 'rgba(255, 255, 255, .5)'
},
length: (window.innerWidth / 6),
radius: (window.innerWidth / 5)
});
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
19 mai 2022 à 19:21
19 mai 2022 à 19:21
Bonjour,
Pour commencer, merci de reposter ton code en précisant, dans les balises de code, le langage concerné ..
html pour le html .. css pour le css et js pour le javascript.
Explications ( à lire entièrement !) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite,
ça ne marche pas... ce n'est vraiment suffisant.
As tu vérifié dans la console de ton navigateur si tu n'avais pas des erreurs ?
A noter qu'on ne place rien en dehors des balises <head></head> ou <body></body>.
Tes imports de JS doivent se trouver JUSTE AVANT la balise de fin de ton body .. donc juste au dessus de </body> (et pas en dessous !)
Et puis.. tu sembles avoir simplement pris un script trouvé sur le net .. il serait bien de nous dire où tu l'as récupéré.... souvent on trouve, sur le site de l'auteur.. une documentation et des exemples... (il faudrait commencer par là je pense..)
Pour commencer, merci de reposter ton code en précisant, dans les balises de code, le langage concerné ..
html pour le html .. css pour le css et js pour le javascript.
Explications ( à lire entièrement !) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite,
ça ne marche pas... ce n'est vraiment suffisant.
As tu vérifié dans la console de ton navigateur si tu n'avais pas des erreurs ?
A noter qu'on ne place rien en dehors des balises <head></head> ou <body></body>.
Tes imports de JS doivent se trouver JUSTE AVANT la balise de fin de ton body .. donc juste au dessus de </body> (et pas en dessous !)
Et puis.. tu sembles avoir simplement pris un script trouvé sur le net .. il serait bien de nous dire où tu l'as récupéré.... souvent on trouve, sur le site de l'auteur.. une documentation et des exemples... (il faudrait commencer par là je pense..)
bonjour merci pour les indications , voici les information complémentaire et les codes dans les bon language
l html
le css
et le javascript trouver sur https://codepen.io/acauamontiel/pen/abpLEG
concernant le navigateur , voici les erreurs qu il m'indiquent:
Failed to load resource: net::ERR_FILE_NOT_FOUND DAYPBL__-webfont.woff2:1
Uncaught SyntaxError: Unexpected token '<' Js:1
merci pour les indications que tu m as déja indiqué^^ de plus je ne vois pas de doc sur le site ( lien plus haut
l html
<!DOCTYPE html
<html>
<head>
<div id="base">
<meta charset="utf-8" />
<link rel="stylesheet" href="css/Forme.css" />
<link rel="icon" type="image/png" sizes="32x32" href="guessrlogo.png">
<script src="Js/Name.js" > </script>
<title>CsGuessr </title>
</head>
<body>
<header>
<nav class="menu nav">
<img src="css/img/title.png"/>
<ul id="menu_nav">
<li><a href="zzzzz">GuessIT</a></li>
<li><a href="zzzzz">soon</a></li>
<li><a href="zzzzz">soon</a></li>
<li><a href="zzzzz">soon</a></li>
<li><a href="zzzzz">soon</a></li>
</ul>
</nav>
</header>
<p style="text-align:center"> <img alt="pp" src="css/img/pp.png"> </p>
<canvas></canvas>
<p id="intro"> <img alt="pp" src="css/img/pp.png" width="500" height="200" /> <br> filou dodu
<footer></footer>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
<script src="D:\travail\codage\NTF\Js"></script>
</body>
</html>
le css
@font-face {
font-family: 'dayposterblackregular';
src: url('police/DAYPBL__-webfont.eot');
src: url('police/DAYPBL__-webfont.eot?#iefix') format('embedded-opentype'),
url('police/css/police/DAYPBL__-webfont.woff2') format('woff2'),
url('police/DAYPBL__-webfont.woff') format('woff'),
url('police/DAYPBL__-webfont.ttf') format('truetype'),
url('police/DAYPBL__-webfont.svg#dayposterblackregular') format('svg');
font-weight: normal;
font-style: normal;
}
p
{
color: rgb(13, 177, 241);
font-family: 'dayposterblackregular' ;
}
h1
{
color:rgb(158, 106, 165);
font-family: 'dayposterblackregular' ;
background-color: rgb(17, 20, 20);
width: 300px
}
#intro
{
text-decoration: underline;
}
body {
overflow: hidden;
background: #111;
}
mark
{
/* La couleur de fond prend le pas sur celle de toute la page */
background-color: red;
color: black;
}
nav {
display: flex;
}
#menu_nav
{
list-style-type: none;
display: flex;
margin: 0 auto;
}
nav li
{
margin-right: 15%;
justify-content: flex-end;
}
nav a
{
font-size: 1.5em;
color: rgba(226,173,0,255);
padding-bottom: 5px;
text-decoration: none;
background-color: rgb(43,44,43);
padding:5%;
border-radius: 30px;
}
nav a:hover
{
font-size: 1.7em;
color: cadetblue;
background-color: whitesmoke;
border-radius: 40px;
}
et le javascript trouver sur https://codepen.io/acauamontiel/pen/abpLEG
// Init Stats
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
/*!
* Mantis.js / jQuery / Zepto.js plugin for Constellation
* @version 1.2.2
* @author Acauã Montiel <***@***>
* @license http://acaua.mit-license.org/
*/
(function ($, window) {
var $window = $(window);
/**
* Makes a nice constellation on canvas
* @constructor Constellation
*/
function Constellation (canvas, options) {
var $canvas = $(canvas),
context = canvas.getContext('2d'),
defaults = {
star: {
color: 'rgba(255, 255, 255, .5)',
width: 1,
randomWidth: true
},
line: {
color: 'rgba(255, 255, 255, .5)',
width: 0.2
},
position: {
x: 0,
y: 0
},
width: window.innerWidth,
height: window.innerHeight,
velocity: 0.1,
length: 100,
distance: 120,
radius: 150,
stars: []
},
config = $.extend(true, {}, defaults, options);
function Star (){
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (config.velocity - (Math.random() * 0.5));
this.vy = (config.velocity - (Math.random() * 0.5));
this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width;
}
Star.prototype = {
create: function(){
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.fill();
},
animate: function(){
var i;
for (i = 0; i < config.length; i++) {
var star = config.stars[i];
if (star.y < 0 || star.y > canvas.height) {
star.vx = star.vx;
star.vy = - star.vy;
} else if (star.x < 0 || star.x > canvas.width) {
star.vx = - star.vx;
star.vy = star.vy;
}
star.x += star.vx;
star.y += star.vy;
}
},
line: function(){
var length = config.length,
iStar,
jStar,
i,
j;
for (i = 0; i < length; i++) {
for (j = 0; j < length; j++) {
iStar = config.stars[i];
jStar = config.stars[j];
if (
(iStar.x - jStar.x) < config.distance &&
(iStar.y - jStar.y) < config.distance &&
(iStar.x - jStar.x) > - config.distance &&
(iStar.y - jStar.y) > - config.distance
) {
if (
(iStar.x - config.position.x) < config.radius &&
(iStar.y - config.position.y) < config.radius &&
(iStar.x - config.position.x) > - config.radius &&
(iStar.y - config.position.y) > - config.radius
) {
context.beginPath();
context.moveTo(iStar.x, iStar.y);
context.lineTo(jStar.x, jStar.y);
context.stroke();
context.closePath();
}
}
}
}
}
};
this.createStars = function (){
var length = config.length,
star,
i;
context.clearRect(0, 0, canvas.width, canvas.height);
for (i = 0; i < length; i++) {
config.stars.push(new Star());
star = config.stars[i];
star.create();
}
star.line();
star.animate();
};
this.setCanvas = function (){
canvas.width = config.width;
canvas.height = config.height;
};
this.setContext = function (){
context.fillStyle = config.star.color;
context.strokeStyle = config.line.color;
context.lineWidth = config.line.width;
};
this.setInitialPosition = function (){
if (!options || !options.hasOwnProperty('position')) {
config.position = {
x: canvas.width * 0.5,
y: canvas.height * 0.5
};
}
};
this.loop = function (callback) {
callback();
this.rAF = window.requestAnimationFrame(function (){
stats.begin();
this.loop(callback);
stats.end();
}.bind(this));
};
this.handlers = {
window: {
mousemove: function(e){
config.position.x = e.pageX - $canvas.offset().left;
config.position.y = e.pageY - $canvas.offset().top;
},
resize: function (){
window.cancelAnimationFrame(this.rAF);
}
}
};
this.bind = function (){
$window
.on('mousemove', this.handlers.window.mousemove)
.on('resize', this.handlers.window.resize.bind(this));
};
this.unbind = function (){
$window
.off('mousemove', this.handlers.window.mousemove)
.off('resize', this.handlers.window.resize);
}
this.init = function (){
this.setCanvas();
this.setContext();
this.setInitialPosition();
this.loop(this.createStars);
this.bind();
};
}
function instantiate(element, options) {
var c = new Constellation(element, options);
c.init();
}
$.fn.constellation = function (options) {
return this.each(function (){
$window.on('resize', () => {
instantiate(this, options);
});
instantiate(this, options);
});
};
})($, window);
// Init plugin
$('canvas').constellation({
star: {
width: 3
},
line: {
color: 'rgba(255, 255, 255, .5)'
},
length: (window.innerWidth / 6),
radius: (window.innerWidth / 5)
});
concernant le navigateur , voici les erreurs qu il m'indiquent:
Failed to load resource: net::ERR_FILE_NOT_FOUND DAYPBL__-webfont.woff2:1
Uncaught SyntaxError: Unexpected token '<' Js:1
merci pour les indications que tu m as déja indiqué^^ de plus je ne vois pas de doc sur le site ( lien plus haut
