您现在的位置是:首页 > Javascript
当前栏目
JavaScript小例子
2023-03-14 10:27:08 时间
<html> <head> <style> #vector {position:static; border:1px solid red; background-color:gray;} span {display:block; position:absolute; font-size:20px; text-align:center; font-weight:bolder; line-height:25px; border:1px solid blue; background-color:yellow; z-Index:10;} #input {position:absolute; line-height:25px; border:1px solid red; font-size:20px; background-color:#DBDCDB;} </style> </head> <body onload="init()"> <div id="vector" style="top:10px;left:10px;width:800px;height:300px;"> <span>忠诚</span> <span>博雅</span> <span>朴实</span> <span>刚毅</span> <span>求实</span> <span>开拓</span> <span>严谨</span> <span>认真</span> <span>创新</span> <span>高效</span> <span>务实</span> <span>进取</span> </div> <p> <div id="input" style="top:350px;left:10px;height:25px;width:800px;">华师精神是:</div> </p> </body> <script> var keywords = ["忠诚","博雅","朴实","刚毅"]; //正确答案 var tryTimes = keywords.length; var isCorrect = 1; var inputDom = document.getElementById("input"); function init() { var dom = document.getElementById("vector"); var l = dom.children.length; for(var i=0;i<l;i++) { var node = dom.children[i]; node.style.height = "25px"; node.style.width = "50px"; node.style.top = parseInt((Math.random()*(parseInt(dom.style.height) - parseInt(node.style.height)) + parseInt(dom.style.top))) + "px"; node.style.left = parseInt((Math.random()*(parseInt(dom.style.width) - parseInt(node.style.width)) + parseInt(dom.style.left))) + "px"; node.isAnswer = 0; for(var j in keywords) { if(node.innerHTML == keywords[j]) { node.isAnswer = 1; break; } } node.onmousedown = mouseDown; } } function mouseDown(e) { e = e||event; document.movingDom = this; if(e.layerX) //IE下 { this.offset = {coffsetX:e.layerX, coffsetY:e.layerY}; } else //ff下 { this.offset = {coffsetX:e.offsetX, coffsetY:e.offsetY}; } document.onmousemove = mouseMove; document.onmouseup = mouseUp; } function mouseMove(e) { e = e||event; var dom = this.movingDom; if(!(parseInt(dom.style.top) == parseInt(inputDom.style.top) && parseInt(dom.style.left) >= parseInt(inputDom.style.left) && parseInt(dom.style.left) <= (parseInt(inputDom.style.left) + parseInt(inputDom.style.width) - parseInt(dom.style.width)))) { dom.style.top = e.clientY - dom.offset.coffsetY + "px"; dom.style.left = e.clientX - dom.offset.coffsetX + "px"; } } function mouseUp(e) { var dom = this.movingDom; document.onmousemove = null; document.onmouseup = null; if( parseInt(dom.style.top ) == parseInt(inputDom.style.top) && parseInt(dom.style.left) >= parseInt(inputDom.style.left) && parseInt(dom.style.left) <= (parseInt(inputDom.style.left) + parseInt(inputDom.style.width) - parseInt(dom.style.width))) { dom.style.backgroundColor = "red"; tryTimes--; isCorrect *= dom.isAnswer; if(tryTimes==0) { isCorrect?alert("回答正确!"):alert("回答错误,回家去面壁"); location.reload(); } } } </script> </html>
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?