输入数字:
源码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html xmlns= "http://www.w3.org/1999/xhtml" > <body> <div> 输入数字:<input id= "txtNum" type= "text" onkeyup= "showNum();" value= "856" /> <div id= "divNum" style= "height:20px; position:relative; margin-top:5px;" ></div> <script type= "text/javascript" > function showNum() { var txtNum = document.getElementById( 'txtNum' ); var divNum = document.getElementById( 'divNum' ); if (isNaN(txtNum.value)) { return ; } divNum.innerHTML = '' ; var width = Math.floor(divNum.offsetHeight / 5); for ( var i=0; i<txtNum.value.length; i++) { var index = parseInt(txtNum.value[i]); var strNum = arrNum[index]; for ( var j=0; j<strNum.length; j++) { if (strNum[j] == '1' ) { var div = getDiv(width); div.style.left = j % 3 * width + i * width * 4; div.style.top = Math.floor(j / 3) * width; divNum.appendChild(div); } } } } var arrNum = [ '111101101101111' , '001001001001001' , '111001111100111' , '111001111001111' , '101101111001001' , '111100111001111' , '111100111101111' , '111001001001001' , '111101111101111' , '111101111001111' ]; function getDiv(width) { var div = document.createElement( 'div' ); div.style.width = width; div.style.height = width; div.style.backgroundColor = 'red' ; div.style.position = 'absolute' ; return div; } showNum(); </script> </div> </form> </body> </html> |
欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?