2019-08-23/24_Work_Day25

1. 车牌限行判断

html:
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>work01-车牌</title>
    <style>

    </style>
</head>

<body>
    <div id="limit">
        请输入车牌号:
        <select class="province">
        </select>
        <input type="text" id="license" value="">
        <input id="submit" type="button" value="确定">
        <p id="result"></p>
    </div>

    <script>
    </script>
</body>

</html>
css:
* {
  margin: 0;
  padding: 0;
}

body {
  width: 80%;
  margin: 0 auto;
  font-size: 18px;
}

#limit {
  text-align: center;
  position: relative;
  top: 100px;
}

.province {
  font-size: 14px;
}

#license {
  position: relative;
  height: 18px;
  font-size: 18px;
  font-family: 'Courier New', Courier, monospace;
}

#submit {
  height: 18px;
  font-size: 18px;

}

#result {
  margin-top: 50px;
  margin-left: -50px;
  position: relative;
  font-size: 20px;
  font-family: 'Times New Roman', Times, serif;
}
js:
(function () {
  let province = document.querySelector('.province')
  let license = document.querySelector('#license')
  let result = document.querySelector('#result')
  let sBtn = document.querySelector('#submit')

  function fixSelect() {
    //生成省份选择下拉列表
    const proList = '京、沪、津、渝、鲁、冀、晋、蒙、辽、吉、黑、苏、浙、皖、闽、赣、豫、湘、鄂、粤、桂、琼、川、贵、云、藏、陕、甘、青、宁、新、港、澳、台'.split('、')
    fixStr = '<option value="">--选择省份--</option>'
    for (let i = 0; i < proList.length; i += 1) {
      fixStr += `<option value="${proList[i]}">${proList[i]}</option>`
    }
    province.innerHTML = fixStr
  }

  function testNum(str) {
    // 验证车牌
    let matchRule =
        /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
    if (!matchRule.test(str)) {
      return false
    } else {
      return true
    }
  }

  function getLastNum(str) {
    // 选择字符串最后一位数字
    for (let i = str.length - 1; i > -1; i -= 1) {
      num = parseInt(str[i])
      if (!isNaN(num)) {
        return num
      }
    }
    return null
  }

  function judgeLicense() {
    // 判断是否限行(成都)
    if (!testNum(province.value + license.value)) {
      alert('车牌号错误!')
      province.value = ''
      license.value = ''
      result.textContent = ''
      return
    }

    const rule = [
      [1, 6],
      [2, 7],
      [3, 8],
      [4, 9],
      [5, 0]
    ]
    let weekday = new Date().getDay()
    // 可以出行/本日限行
    if (weekday < 6) {
      let carLastNum = getLastNum(license.value)
      if (rule[weekday - 1].indexOf(carLastNum) !== -1) {
        result.textContent = "本日限行"
      } else {
        result.textContent = "可以出行"
      }
    } else {
      result.textContent = "可以出行"
    }
  }


  license.addEventListener('keyup', function (e) {
    if (e.keyCode == '13') {
      judgeLicense()
    }
  })

  sBtn.addEventListener('click', judgeLicense)

  fixSelect()

})()

2. 点名系统

html:
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>work02-点名</title>
    <style>
    </style>
</head>

<body>
    <div id="main">
    <h1>点名系统</h1>
    <p id="student"></p>
    <input id="start" type="button" value="开始">
    <input id="reset" type="button" value="重新开始">
</div>
    <script>
    </script>
</body>

</html>
css:
*{
  margin: 0;
  padding: 0;
}
body{
  width: 80%;
  margin: 0 auto;
}
#main{
  text-align: center;
  position: relative;
  top: 200px;
}
#student{
  margin: 20px;
  height: 44px;
  font-size: 36px;
  line-height: 44px;

}
input[type="button"]{
  width: 100px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  font-family:'Courier New', Courier, monospace;
  background-color: gray;
  position: relative;
}

#reset {
  position: absolute;
  top: 130px;
  left: 330px;
  visibility: hidden;
}
js:
(function () {
  let stuList = [
    '苗源', '王力', '高中轩', '杨斌'
  ]

  // sessionStorage.setItem('stuList', JSON.stringify(stuList))

  // stuList = JSON.parse(sessionStorage.getItem('stuList'))


  let student = document.querySelector('#student')
  let counter = 0
  let tmpList = stuList.concat()
  let interval = null

  function getRandom() {
    if (counter < 20) {
      index = parseInt(Math.random() * stuList.length)
      student.textContent = tmpList[index]
      tmpList.splice(index, 1)
      counter += 1
    } else {
      clearInterval(interval);
    }
    if (counter % stuList.length == 0) {
      tmpList = stuList.concat()
      console.log(counter)
    }
  }

  function inter(){
    if (counter < 20) {
      index = parseInt(Math.random() * stuList.length)
      student.textContent = tmpList[index]
      tmpList.splice(index, 1)
      counter += 1
    } else {
      clearInterval(interval);
      student.textContent = tmpList[index]
    }
    if (counter % stuList.length == 0) {
      tmpList = stuList.concat()
      console.log(counter)
    }
  }
  let stBtn = document.querySelector('#start')
  let reBtn = document.querySelector('#reset')
  stBtn.addEventListener('click', () => {
    interval = setInterval(inter, 100)
    reBtn.style.visibility = 'visible'
    stBtn.style.visibility = 'hidden'
  })
  reBtn.addEventListener('click', () => {
    counter = 0
    interval = setInterval(inter, 100)
  })
})()

3.列表删除页面

html:
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>work03-列表删除</title>
    <style>
    </style>
</head>

<body>
    <div id="main">
        <ul class="list"></ul>
        <div class="bottom">
            <input type="text" id="text">
            <input id="submit" type="button" value="确定">
        </div>
    </div>
    <script>
    </script>
</body>

</html>
css:
* {
  margin: 0;
  padding: 0;
  /* border: 1px solid salmon; */
}

body {
  width: 80%;
  height: 500px;
  margin: 0 auto;
}

#main {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.list {
  /* margin-top: 100px; */
  list-style: none;
  color: white;
  font-size: 28px;
}

.list>li {
  width: 200px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  position: relative;
  background-color: rgb(79, 141, 143);
  border-bottom: 1px solid white;
}

li>a {
  text-decoration: none;
  position: absolute;
  top: 5px;
  right: 2px;
}

li>a:link,
li>a:visited {
  color: white;
  font-size: 20px;
  line-height: 40px;
}

.bottom {
  position: relative;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

#text {
  display: inline-block;
  position: relative;
  left: 65px;
  width: 200px;
  height: 50px;
  border: none;
  border-bottom: 1px solid darkgray;
  outline: none;
  text-align: center;
  font-size: 18px;
  margin: 0 auto;
}

#submit {
  display: inline-block;
  position: relative;
  left: 65px;
  bottom: -10px;
  width: 120px;
  height: 30px;
  background-color: rgb(252, 106, 63);
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
}
js:
        (function () {
            let fruitList = ['苹果', '香蕉', '火龙果', '西瓜']
            let ulList = document.querySelector('.list')
            let fruit = document.querySelector('#text')
            let btn = document.querySelector('#submit')
            let index = 0

            function drawList() {
                // 生成初始列表
                str = ''
                for (index; index < fruitList.length; index += 1) {
                    str +=
                        `<li id="l_${index}">${fruitList[index]}<a href="javascript:void(0);" onclick="delFruit('l_${index}');">x</a></li>`
                }
                ulList.innerHTML = str
            }

            delFruit = function (id) {
                // 删除列表项
                let li = document.getElementById(id)
                li.remove()
            }

            function addFruit() {
                str =
                    `<li id="l_${index}">${fruit.value}<a href="javascript:void(0);" onclick="delFruit('l_${index}');">x</a></li>`
                ulList.insertAdjacentHTML('beforeEnd', str)
                index += 1
            }

            fruit.addEventListener('keyup',
                function (e) {
                    if (e.keyCode == '13') {
                        addFruit()
                    }
                })

            btn.addEventListener('click', addFruit)

            drawList()

        })()

4. 购物车页面

html:
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>work04-购物车</title>
    <style>
    </style>
</head>

<body>
    <div class="main">
        <form action="" method="post">
            <div class="header">
                <div class="left">
                    <input type="checkbox" id="allCheckbox">全选
                    <span>商品</span>
                </div>
                <div class="right">
                    <span>单价</span>
                    <span>数量</span>
                    <span>小计</span>
                    <span>操作</span>
                </div>
            </div>

            <div class="row">
                <div class="line">
                    <div><input type="checkbox" name="myId" value=""></div>
                    <div>
                        <img src="" width="70" height="80">
                        <span>海澜之家/Helain Home</span>
                    </div>
                </div>

                <div class="row_right">
                    <div>100元</div>
                    <div class="num">
                        <span class="sub">-</span>
                        <span><input type="text" class="val" value="x"></span>
                        <span class="sum">+</span>
                    </div>
                    <div class="price">100元</div>
                    <div>
                        <a href="">删除</a>
                    </div>
                </div>
            </div>

            <div class="center_bottom">
                <a href="" class="delete">删除选中产品</a>
                <span>共选中了<font id="allnum">0
                </font>件商品 总计: ￥<font id="allpri">0</font>元</span>
                <span><button>去结算</button></span>
            </div>
        </form>
    </div>
</body>

</html>
css:
* {
  margin: 0;
  padding: 0;
  /* border: 1px solid salmon; */
}

a {
  text-decoration: none;
}

a:link,
a:visited {
  color: black;
}

body {
  width: 960px;
  height: 700px;
  margin: 0 auto;
  position: relative;
}

.main {
  width: 80%;
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.header {
  overflow: hidden;
  height: 40px;
  line-height: 40px;
  background-color: #EEEEEE;
  border-bottom: 1px solid #ccc
}

.header .left {
  float: left;

}

.header .left span {
  margin-left: 70px;
}

.header .right {
  float: right;
}

.header .right:last-child {
  margin-right: 0px
}

.header div,
.header span {
  font-size: 14px;
  margin-right: 70px
}

.row {
  height: 85px;
  border-bottom: 1px solid gray;
  line-height: 85px;
  padding-bottom: 10px;
}

.row>div {
  margin-right: 28px;
}

.line div {
  float: left;
}

.line div>img {
  margin-left: 10px;
}

.line div>span {
  display: block;
  float: right;
  width: 200px;
  height: 85px;
  line-height: 85px;
  text-align: center;
  bottom: 30px;
}

.row>div div {
  float: left;
}

.line:first-child {
  margin-top: 30px
}

.row_right {
  float: right;
}

.row_right div {
  width: 105px;
  text-align: center;
}

.sub,
.sum {
  cursor: pointer;
  font-size: 16px;
}

.val {
  width: 20px;
  text-align: center;
}

.center_bottom {
  clear: both;
  width: 500px;
  position: relative;
  text-align: right;
}

.center_bottom>a{
  float: left;
  color: gray;
}

.center_bottom:first-child{
  float: left;
  width: 250px;
  height: 40px;
  margin-right: 100px;
}

.center_bottom font {
  color: red;
  font-size: 20px
}

.center_bottom button {
  float: right;
  margin-right: -250px;
  background-color: red;
  color: white;
  width: 90px;
  height: 30px;
  font-size: 16px;
  border: none;
  outline: none;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容

  • 保险公司车险指挥调度系统项目案例分享
    项目名称： 保险指挥调度系统，缩写IDAS。 软件功能： 本软件由6个功能模块组成： 1) 报案受理 2) 指挥调...
    威客方案阅读 1,432评论 0赞 2
  • 人生就是一个圆
    有人对我说：“像某某那样的人，你根本就没有必要对他那么好，你根本就没有必要理他。”我听了只是淡淡的笑了笑。也有人对...
    华869f阅读 1,115评论 14赞 8
  • 你会支持爱人离开体制吗
    “小成说，他下个月要辞职。请你阻止他这个想法，拜托了！一定要阻止。”看到爱人的兄弟发来的微信消息，我的心突然一紧，...
    百合的故事阅读 272评论 0赞 1
  • Scrapy 的环境搭建
    Scrapy 的环境搭建 找到python3 生成虚拟环境 进入文件夹 生成爬虫项目 在项目外面创建spider是...
    Tim_Lee阅读 142评论 0赞 0
  • 仿佛
    每当麻雀叽喳， 坠入那熟悉而昏暗的角落。 滞留在那里， 什么都不曾做， 什么都不愿说， 只凝望， 带着些惆怅。 仿...
    陈吟浅唱阅读 536评论 2赞 23