Js下星星

于 2022-06-08 11:14:08 发布
阅读量153 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi_jia233/article/details/125180863
版权

效果展示

 

1打开Visual Studio Code然后CTRL+n新建然后把文件设置成HTML然后！获取html内容

2需要创建一个div包裹后续增加的div

 

3然后给body，框架和星星属性

 

4然后用js做页面启动时，然后重复200次函数，用随机数给新建的div属性上边距和左边距，for循环内就是新建一个div然后给文本加一个⭐号，给一个box类，然后加上随机数的属性，然后添加到最初添加的div

 

小结：这次的js下星星是随机数,新建和动画效果来制作的，是用老师讲过的气球案例将气球改为星星，背景改为黑色，下的方向也修改了 。新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

shi_jia233
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
画星星js
Sunflower_knight的博客
05-26 600
代码 JavaScript部分 这次的代码直接从js开始，首先我们先写一个for循环，然后在for循环里面嵌套一个for循环在第二个for循环里面输出一个星星，然后在第一个for循环中输出一个换行，实现随着行数的增加每一行都会比上一行多一个五角星 <script> //三角形的---五角星----随着行数的增加,每一行都会比上一行多一个五角星 // 提示:document.write("★");换行: document.write("<br...
js星星评价
03-08
这个是在购买商品后有个星星评价的那个效果.
javascript案例27——打印星星、正三角星星、倒三角星星等
努力、拼搏、奋进
05-14 2695
一、 案例描述1 打印矩形， 要求每次只能输出一个☆（ 采用for）。 ☆☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ 案例效果演示1 js代码1 var str = ''; // 外层控制行数 for (var i = 1; i <= 4; i++) { // 内层控制每行打印的个数 for (var j = 0; j < 5; j++) { str += '☆'; } str += '\n';
JavaScript画星星
weixin_57765394的博客
04-06 898
第一步我们先创建一个HTML文档 画星星这里面用到的关键技术就是js里的for循环、 我们在body标签里写一个script然后就可以写for循环了 下面是我写的，想要跟多星可以更改i<于的值这里我就搞了五个。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="...
JS星星闪烁
weixin_44858732的博客
06-09 690
JS星星闪烁 接下来我们使用Visual Studio这个软件来写一个的方法，我们可以使用这种写法写一个简单的小案例。这个小案例是什么呢。就是运用JS方法然后实现星星闪烁的一个效果。 那么这个代码要怎么写才能让他实现出来呢，首先我们需要先搭建Html的页面。写一些样式让他展示出来。 我们先看一下html的页面截图： 在截图中我们可以看到html页面搭建需要先建立一个建立一个input的标签。在做...
JS实现星星海特效
10-15
主要为大家详细介绍了JS实现星星海特效特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现小星星游戏
10-15
主要为大家详细介绍了js实现小星星游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现漫天星星效果
10-20
主要为大家详细介绍了js点击出漫天的小星星，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现小星星特效
10-15
主要为大家详细介绍了JS实现小星星特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现星星评分功能实例代码(两种方法)
10-22
主要介绍了JS实现星星评分功能实例代码(两种方法)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
仿淘宝星星评分效果-纯JS
03-01
仿淘宝星星评分效果-纯JS，
js等级评分效果（星星实现打分功能）
01-20
js等级评分效果（星星实现打分功能） 和csdn下面的评论上的星星差不多
原生js打印星星
11-20
javascript打印星星
同时支持多个星星评分的JS，非常实用
10-18
同时支持多个星星评分的JS，非常实用 同时支持多个星星评分的JS，非常实用 同时支持多个星星评分的JS，非常实用
JavaScript实现简单星星闪烁特效
baidu_35267690的博客
01-30 9690
最近学JavaScript，写了一个简单的星星闪烁动画，记录一下思路。 一、画canvas 1、HTML部分 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;star&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="can"
js星星
weixin_43365873的博客
11-29 163
简单评价星星 HTML： ** js： ** ** css: **
JS 实现简单星星评分功能
mixi9760的博客
07-26 8010
思路调用onmouseover将经过的星星和之前的设置成红色 之后的设置成黑色代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document示例</title> </head> <body onload="test()"> <table id ="czy"> <tr>
js制作星星闪特效
qq_41309350的博客
03-03 2792
效果如下 思路呢？ 准备一张星星的图片 创建多个星星（可以利用for循坏） 求出可视网页的宽高 clientWidth，clientHeight 设置星星的随机坐标 利用 Math.random() 设置星星的缩放可以用css中的scale 设置星星的缩放延迟频率 animationDelay 给星星加动画（鼠标移动时，星星方法旋转） 代码如下 <style> *{ margin: 0; padding: 0;
js鼠标跟随特效小星星
最新发布
05-11
可以使用CSS3和JavaScript实现一个鼠标跟随特效小星星。以下是具体步骤： 1. 在HTML中创建一个包含小星星的div元素，并设置其样式为圆形。 ```html <div id="star"></div> ``` ```css #star { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; position: absolute; top: -100px; left: -100px; z-index: 9999; pointer-events: none; transition: 0.2s ease-out; } ``` 2. 使用JavaScript监听鼠标移动事件，并根据鼠标的位置，移动小星星的位置。 ```javascript const star = document.querySelector("#star"); document.addEventListener("mousemove", (e) => { let x = e.clientX; let y = e.clientY; star.style.top = y + "px"; star.style.left = x + "px"; }); ``` 3. 为了使小星星有一个平滑的移动效果，可以添加CSS过渡效果。 ```css #star { // ... transition: 0.2s ease-out; } ``` 这样就可以实现一个简单的鼠标跟随特效小星星了。你可以根据自己的需求调整小星星的大小和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值