Products
GG网络技术分享 2025-03-18 16:13 0
大家好，我是DD，已经是封闭在家的第51天了！
最近一直在更新Java新特性（https://www.didispace.com/java-features/）和IDEA Tips（https://www.didispace.com/idea-tips/）两个原创专栏，其他方向内容的动态关注少了。昨天天晚上刷推的时候，瞄到了这个神奇的东西，觉得挺cool的，拿出来分享下：
相信你看到图，不用我说，你也猜到是啥了吧？html里可以跑python代码了！
看到好多Python公众号已经开始猛吹未来了，但乍看怎么觉得有点像JSP？或者一些模版引擎？是进步还是倒退呢？与其瞎想，不如仔细看看这个东东的能力吧！
根据官方介绍，这个名为PyScript的框架，其核心目标是为开发者提供在标准HTML中嵌入Python代码的能力，使用 Python调用JavaScript函数库，并以此实现利用Python创建Web应用的功能。
看到介绍里提到了调用JavaScript函数库的能力，看来跟JSP或者模版引擎还是有区别的。
官方给了一个例子，可以帮助我们观的感受这个开发框架的能力，不妨跟着DD看看，它能做啥吧！
第一个案例，hello world
代码很简单，就下面这几行。你只需要创建一个html文件，然后复制进去就可以了。
|
保存好之后，在浏览器里打开就能看到这样的页面了：
回头再看看这个html里的内容，三个核心内容：
第二个案例，数据定义 + 数据展示
先创建一个data.py文件，然后加入前面的代码。功能很简单，就是随机生成（x，y）的坐标
|
再创建一个html文件，加入下面的代码
|
这里就稍微复杂一些了，除了hello world中的几个要点外，这里还有这几个要关注的地方：
这个页面的执行效果是这样的：
是不是很神奇呢？整个过程中都没有大家熟悉的cs、js内容，就完成了这样一个图的页面实现。
最后，谈谈在整个尝试过程中，给我的几个感受：
这个开发框架目前还只是alpha版本，未来一定还会有更多特性与优化出来，总体上我觉得这个框架还是非常cool的，尤其对于刚学会Python，或者只会Python，但又想快速开发Web应用的小伙伴来说，可能将会是个不错的选择，那你觉得这个框架如何？未来会不会火？留言区聊聊吧！
鼠标点击页面，在哪里点击就在那个位置创建一个div，宽高50，颜色随机，div在鼠标点击的正中间。
效果如下图所示：
| var Method=(function () { return { EVENT_ID:\"event_id\", loadImage:function (arr) { var img=new Image(); img.arr=arr; img.list=[]; img.num=0; // 如果DOM对象下的事件侦听没有被删除掉，将会常驻堆中 // 一旦触发了这个事件需要的条件，就会继续执行事件函数 img.addEventListener(\"load\",this.loadHandler); img.self=this; img.src=arr[img.num]; }, loadHandler:function (e) { this.list.push(this.cloneNode(false)); this.num++; if(this.num>this.arr.length-1){ this.removeEventListener(\"load\",this.self.loadHandler); var evt=new Event(Method.EVENT_ID); evt.list=this.list; document.dispatchEvent(evt); return; } this.src=this.arr[this.num]; }, $c:function (type,parent,style) { var elem=document.createElement(type); if(parent) parent.appendChild(elem); for(var key in style){ elem.style[key]=style[key]; } return elem; }, divColor: function () { var col=\"#\";//这个字符串第一位为# 颜色的格式 for(var i=0;i<6;i++){ col+=parseInt(Math.random()*16).toString(16);//rondom*16后的随机值即为0-1*16==0-16; toString(16)为转化为16进制 } return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式 }, random:function (min,max) { max=Math.max(min,max); min=Math.min(min,max); return Math.floor(Math.random()*(max-min)+min); }, dragElem:function (elem) { elem.addEventListener(\"mousedown\",this.mouseDragHandler); elem.self=this; }, removeDrag:function (elem) { elem.removeEventListener(\"mousedown\",this.mouseDragHandler); }, mouseDragHandler:function (e) { if(e.type===\"mousedown\"){ e.stopPropagation(); e.preventDefault(); document.point={x:e.offsetX,y:e.offsetY}; document.elem=this; this.addEventListener(\"mouseup\",this.self.mouseDragHandler); document.addEventListener(\"mousemove\",this.self.mouseDragHandler); }else if(e.type===\"mousemove\"){ this.elem.style.left=e.x-this.point.x+\"px\"; this.elem.style.top=e.y-this.point.y+\"px\"; }else if(e.type===\"mouseup\"){ this.removeEventListener(\"mouseup\",this.self.mouseDragHandler); document.removeEventListener(\"mousemove\",this.self.mouseDragHandler); } } } })(); |
html代码：
| <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title>Title</title> </head> <script src=\"js/Method.js\"></script> <body> <script> init(); function init() { document.addEventListener(\"mousedown\",mouseHandler); } function mouseHandler(e) { var randomDiv=Method.$c(\"div\",document.body,{ width: \"50px\", height: \"50px\", position: \"absolute\", backgroundColor:divColor() }) randomDiv.style.left=e.clientX-randomDiv.offsetWidth/2+\"px\"; randomDiv.style.top=e.clientY-randomDiv.offsetHeight/2+\"px\"; /* top:e.clientY-this.offsetHeight/2+\"px\",//原因 设置为了X...xbl // removeEventListener(randomDiv);*/ } function divColor() { var col=\"#\";//这个字符串第一位为# 颜色的格式 for(var i=0;i<6;i++){ col+=parseInt(Math.random()*16).toString(16);//rondom*16后的随机值即为0-1*16==0-16; toString(16)为转化为16进制 } return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式 } </script> </body> </html> |
以上就是js如何实现随机生成div的效果的详细内容，更多请关注网站的其它相关文章！
Demand feedback
