百度输入法
<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><label>新华网</label>北京5月29日电(新华社记者)从三聚氰胺到瘦肉精，从染色馒头到毒豆芽，在食品中添加非食用物质和滥用食品添加剂已成为百姓餐桌上突出的"不安全因素"。近期以来，从北京到广东，从浙江到宁夏，一场打击食品非法添加的"风暴"席卷全国。
</p>
<p>
4月21日，国务院部署严厉打击食品非法添加和滥用食品添加剂专项行动后，广东省高度重视，随即召开了全省电视电话会议。省委领导强调，食品安全是"高压线"，决不能"下不为例"；抓好食品安全要突出一个"<label>严</label>"字，做到<label>严防</label>、<label>严查</label>、<label>严处</label>。
</p>
<p>
<label>宁夏重点开展了四轮问题乳粉彻查清缴工作</label>，对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查，共查处问题乳粉案件4起、涉案企业3家，吊销2家乳粉生产企业生产许可证。
</p>
<p>
做好风险监测工作是许多地方加强食品安全的重点工作之一。在北京，<label style="color:red;">全市设立了3000个风险监测点</label>，建立了包括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> *{
margin: 10px; } input{
width: 260px; margin: 15px auto; } span{
font-size: 12px; color: #5e5e5e; } h3{
color: red; } </style></head><body> <input type="text"><span>输入数字求和,数字之间用半角","号分隔</span> <p> <button>求和</button> </p> <h3></h3><script src="../jquery-3.2.1.min.js"></script> <script> $("button").on("click",function () {
var valEle = $("input").val().replace(/,/g,""); var sum = 0; for(var i = 0;i < valEle.length; i++){
sum += Number(valEle[i]); } $("h3").text(sum); }) </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、setTimeout</li>
<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
标签： fh58m系列fpc连接器