Code pour dessiner des cibles fléchées en utilisant js et css
Supposons que je veuille dessiner une image similaire à une cible fléchée maintenant, avec trois cercles. Peut-être que vous pouvez les écrire directement en HTML. Cet article partage principalement avec vous le code pour dessiner une cible fléchée en utilisant js et css, j'espère. ça peut aider tout le monde.
//html部分<body>
<p class="circle0">
<p class="circle1">
<p class="circle2">
</p>
</p>
</p></body>Que diriez-vous de créer un cercle centre et d'imbriquer des cercles à l'intérieur ?
La position est utilisée ici. Les valeurs de position sont fixes, statiques, relatives, absolues, héritées
Parmi elles, static est la valeur par défaut, fixe est positionnée par rapport à la fenêtre du navigateur et la coordonnée du coin supérieur gauche est (0, 0 );
relatif est appelé positionnement relatif, qui est positionné par rapport à lui-même est (0, 0> signifie décalage de 20px vers la gauche <; 🎜>absolu est appelé positionnement absolu, qui est relatif sauf statique. Un élément parent positionné par left=20pxinherit hérite de la valeur de l'attribut position de l'élément parent.
Ici, on fait ça
.circle0{ /*大圆的大小*/
/*如何画圆？先是画一个正方形*/
width:600px; height:600px; /*然后设置圆角为50%，就变成一个圆*/
border-radius:50%; /*大圆设成relative作为第一个内圆的参考定位容器*/
position:relative; /*大圆居中*/
margin:0 auto; border:1px solid #000; background-color:green;}.circle1{ width:400px; height:400px; border-radius:50%; /*这是居中的一种方法哦*/
position:absolute; top:50%; left:50%; /*这样设置之后,圆会偏右下方,应该再往左上方移动一半的自己的宽和高*/
margin-left:-200px; margin-top:-200px; /*这样就居中啦*/
border:1px solid #000; background-color:green;}/*最里面的圆也是这样写，提示：此时它相对第二个圆定位，但是没有什么关系*/.circle2{ width:200px; height:200px; border-radius:50%; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px;
border:1px solid #000; background-color:green;}Et si je vous demande de dessiner 100 cercles ? Vous ne pouvez pas les écrire un par un, c'est un travail et un code tellement répétitifs, alors entrons dans le sujet de cet article, écrivons-le en js.
Des étudiants attentifs ont découvert que le code CSS de chaque cercle intérieur est très régulier. Ils sont juste de taille différente. Ensuite, le code central est divisé en deux parties. La première moitié est la même et la seconde moitié. est basé sur lui-même. Écrit dans la moitié de la largeur et de la hauteur.
Maintenant que nous avons trouvé le modèle, nous pouvons commencer à écrire
/*css部分*/
/*既然圆的大小是不一样的而且是有规律，那么我们就不写死了，先把一样的写出来吧，有同学可能想为什么不直接也在js中写？第一，因为这都是相同的代码，重复写几次，很耗空间，第二，在js中写这些比直接给它个className耗性能，所以我们能在css中写的还是在css中写，这样也能更好的分离*/
.circle{ border-radius: 50%; /*文本居中，为下一篇文章做铺垫*/
text-align: center; background-color: green; border: 1px solid #000; position: absolute; top:50%; left:50%; cursor: pointer; }
/*利用id选择器的优先级比class大，覆盖掉一些属性值，大圆我们希望它在浏览器中也是居中的，而且position是相对定位的，大小也是不要写死，增加灵活性，修改的时候只需要修改几个参数*/
#circle{ position: relative; top:0; left:0; margin:10px auto; }/*js部分*/window.onload=function(){
//先创建大圆
var layout=document.createElement("p"); //注意添加class和id的区别哦
layout.className="circle";
layout.id="circle"; var n=10;//n个圆，人为参数一，可根据需要修改
var interval=30;//圆宽高依次小30px,间距则为15px，且最小的圆直径设为30px，则最大的圆的直径为n个interval，人为参数二，可根据需要修改
layout.style.width=n*interval+"px";
layout.style.height=n*interval+"px"; //添加文本
layout.innerHTML=n; //把大圆添加进body中
document.getElementsByTagName("body")[0].appendChild(layout); //接着创建小圆
for(var i=1;i<n;i++){ //千万要在循环的时候重新给p指向哦，不然再第二个循环的时候就会出错
var p=document.createElement("p");
p.className="circle"; //画圆，返回的子圆作为父圆，继续画圆
layout=loadp(layout,p,n-i);
}
} function loadp(parent,child,v){
child.style.width=30*v+"px";
child.style.height=30*v+"px"; //注意驼峰
child.style.marginLeft=-15*v+"px";
child.style.marginTop=-15*v+"px"; //添加文本
child.innerHTML=v; parent.appendChild(child); //返回子圆哦
//如果上面没有在每一次循环中重新指向一个新的p，在第二次循环的时候调用本函数就是在修改第一个内圆的属性值，而且在appendChild的时候发生错误
return child;
}Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
