百度输入法
<style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ text-decoration: none; } ul{ width: 60px; border: 1px solid #3A50AD; margin-top: 10px; } li{ width: 60px; height: 20px; text-align: center; } li:hover{ background-color: #2aabd2; } .close{ border-top: 1px solid #3A50AD; } .u1{ display: none; } style> head> <body> <button class="b1">输入法button> <span>span> <ul class="u1"> <li >< a href ="#" >手写 a > li > < li >< a href ="#" >拼写 a > li > < li class ="close" >< a href ="#" >关闭 a > li > ul > < script src ="js/jquery-3.2.1.min.js" > script > < script > var $ulEle = $( " ul " ); $( " .b1 " ).on( " click " , function () { $ulEle.toggleClass( " u1 " ); }) $( " .close " ).on( " click " , function (){ $ulEle.addClass( " u1 " ); }) $ulEle.children( " li:not(.close) " ).on( " click " , function () { $( " span " ).text($( this ).children( " a " ).text()); }) script >
点击div显示其内容
<style> .d1{ width: 500px; margin: 0 auto; } p{ width: 400px; height: 80px; border: 2px solid #eee; padding:5px; margin: 10px auto; font-size: 11px; text-indent: 2em; } style> head> <body> <div class="d1"> <p><strong>新华网strong>北京5月29日电(新华社记者)从三聚氰胺到瘦肉精，从染色馒头到毒豆芽，在食品中添加非食用物质和滥用食品添加剂已成为百姓餐桌上突出的"不安全因素"。近期以来，从北京到广东，从浙江到宁夏，一场打击食品非法添加的"风暴"席卷全国。 p> <p> 4月21日，国务院部署严厉打击食品非法添加和滥用食品添加剂专项行动后，广东省高度重视，随即召开了全省电视电话会议。省委领导强调，食品安全是"高压线"，决不能"下不为例"；抓好食品安全要突出一个"<strong>严strong>"字，做到<strong>严防strong>、<strong>严查strong>、<strong>严处strong>。 p> <p> <strong>宁夏重点开展了四轮问题乳粉彻查清缴工作strong>，对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查，共查处问题乳粉案件4起、涉案企业3家，吊销2家乳粉生产企业生产许可证。 p> <p> 做好风险监测工作是许多地方加强食品安全的重点工作之一。在北京，<strong style="color:red;">全市设立了3000个风险监测点strong>，建立了包括3000余种食品添加剂和非法添加物的数据库，对110家国内外食品相关组织、媒体发布的线索进行监测，及时进行风险评估，加强抽检控制。 p> div> <script src="js/jquery-3.2.1.min.js">script> <script src="js/bootstrap.min.js">script> <script> $("p").on("click",function () { var text = $(this).text(); alert(text); }) script>
求出数组中所有数字的和
输入数字求和,数字之间用半角","号分隔
弹出层效果
<style> .d1{ width: 300px; height: 100px; position: absolute; top: 50%; left: 50%; border: 4px solid orange; margin: -50px 0 0 -150px; background-color: #fff; z-index: 1000; } .d2{ border-bottom: 2px solid orange; background-color: yellow; overflow: hidden; height: 20px; } .b2{ border: 1px solid orange; color: orange; float: right; margin: 4px 3px; font-size: 9px; background-color: #fff; height: 12px; width: 12px; padding: 0; } .d3{ position:absolute; width: 100%; height: 100%; background-color: rgba(128,128,128,0.3) ; top: 0; left: 0; z-index: 999; } .hide{ display:none; } style> head> <body> <button class="b1">弹出层button> <div class="d3 hide"> <div class="d1"> <div class="d2"> <button class="b2">×button> div> div> div> <script src="js/jquery-3.2.1.min.js">script> <script> var $divEle = $('.d3'); $(".b1").on("click",function () { $divEle.removeClass("hide"); }); $(".b2").on("click",function () { $divEle.addClass("hide"); }) script>
函数传参,改变div任意属性的值
<style> .d1{ width: 380px; height: 100px; margin: 0 auto; } li{ margin: 10px ; list-style: none; } .d2{ width: 200px; height: 200px; background-color: #0f0f0f; color: #fff; font-size: 12px; margin: 0 auto; } style> head> <body> <div class="d1"> <ul> <li> <lable>属性名: <input name="divSty" type="text" id="divSty"> lable> li> <li> <lable>属性值: <input name="val" type="text" id="val"> lable> li> <li> <button class="b1">确定button> <button class="b2">重置button> li> ul> div> <div class="d2">在上方输入框驶入"属性名"及"属性值",点击确定按钮查看效果div> <script src="js/jquery-3.2.1.min.js">script> <script> $(".b1").on("click",function () { var divSty = $("#divSty").val(); var val = $("#val").val(); $(".d2").css(divSty,val); }) $(".b2").on("click",function () { $(".d2").attr("style",""); }) script>
简易选项卡
<style> *{ margin: 0;padding: 0} .hide{ display: none; } .outer{ width: 500px; margin: 10px auto; border: 1px solid #000000; height: 500px; } .title{ background-color: #000000; overflow: hidden; height: 30px; } .title>ul>li{ float: left; list-style: none; width: 80px; color:#fff; line-height: 30px; padding: 0 10px; } .text li{ margin: 10px 25px; } style> head> <body> <div class="outer"> <div class="title"> <ul> <li>第一课li> <li>第二课li> <li>第三课li> ul> div> <div class="text"> <ul class="hide"> <li>网页特效原理分析li> <li>响应用户操作li> <li>提示框效果li> <li>事件驱动li> <li>元素属性操作li> <li>动手编写第一个JS特效li> <li>引入函数li> <li>网页换肤效果li> <li>展开/收缩播放列表效果li> ul> <ul > <li>改变网页背景颜色li> <li>函数传参li> <li>高重用性函数的编写li> <li>126邮箱全选效果li> <li>循环及遍历操作li> <li>调试器的简单使用li> <li>典型循环的构成li> <li>for循环配合if判断li> <li>className的使用li> <li>innerHTML的使用li> <li>戛纳印象效果li> <li>数组li> <li>字符串连接li> ul> <ul> <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源li> <li>JavaScript出现的位置、优缺点li> <li>变量、类型、typeof、数据类型转换、变量作用域li> <li>闭包：什么是闭包、简单应用、闭包缺点li> <li>运算符：算术、赋值、关系、逻辑、其他运算符li> <li>程序流程控制：判断、循环、跳出li> <li>命名规范：命名规范及必要性、匈牙利命名法li> <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值li> <li>定时器的使用：setInterval、setTimeoutli> <li>定时器应用：站长站导航效果li> <li>定时器应用：自动播放的选项卡li> <li>定时器应用：数码时钟li> <li>程序调试方法li> ul> div> div> <script src="js/jquery-3.2.1.min.js">script> <script> $(".title li").on("mouseover",function () { var _index = $(this).index(); $(this).css({ "background": "#eee", "color": "#000"}) $.each($(".text ul"),function (i) { if(_index == i){ $($(".text ul")[i]).removeClass("hide"); }else{ $($(".text ul")[i]).addClass("hide"); } }) }) $(".title li").on("mouseout",function () { $(this).attr("style",""); }) script>
简易JS年历
<style> .container { background-color: #eee; width: 435px; margin: 5px auto; } table, tr { /*border:10px solid #eee;*/ border-spacing: 15px 15px; } td { width: 90px; height: 90px; border: 1px solid #0f0f0f; color: #fff; background-color: #0f0f0f; text-align: center; font-size: 25px; font-weight: bolder; } p { margin: 0; } .active { color: deeppink; background-color: #fff; } .text { border: 15px solid #eee元器件数据手册、IC替代型号，打造电子元器件IC百科大全！
