static_proj/calculator/calculator.js

//px2rem
function setHtmlFontSize() {
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  const htmlDom = document.getElementsByTagName("html")[0]
  if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + "px"
  else htmlDom.style.fontSize = htmlWidth / 10 + "px"
}

// 页面大小改变
οnresize = setHtmlFontSize

// 改变黑白配色

// 判断是否有class
function hasClass(obj, cls) {
  return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
// 增加class
function addClass(obj, cls) {
  if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}
// 移除class
function removeClass(obj, cls) {
  if (this.hasClass(obj, cls)) {
    var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
    obj.className = obj.className.replace(reg, " ");
  }
}
// 设置主题
function setMode() {
  let is_write = JSON.parse(localStorage.getItem('is_write'))
  if(is_write==null) {
    is_write = false
    localStorage.setItem('is_write',JSON.stringify(is_write))
  }
  let dom = document.getElementsByTagName("html")[0];
  let class_name = "write";
  if (hasClass(dom, class_name)) {
    // 当前显示
    // 设置不显示
    if(!is_write)
      removeClass(dom, class_name);

  } else {
    // 当前不显示
    // 设置显示
    if(is_write)
      addClass(dom, class_name);
  }
}

// 改变主题
function toggleMode() {
  let is_write = JSON.parse(localStorage.getItem('is_write'))
  is_write = !is_write
  localStorage.setItem('is_write',JSON.stringify(is_write))
  setMode()
}

// 获取元素
function el(ele) {
  return document.getElementById(ele)
}
// 定义按钮列表
const BTN_LIST = ["C", "+/-", "%", "/", "1", "2", "3", "*", "4", "5", "6", "-", "7", "8", "9", "+", "0", ".", "="]

// 初始化按钮盒子
function initBtnBox() {
  let button_box = el("button_box")
  let row
  // 将按钮放进盒子
  for (let i in BTN_LIST) {
    // 设置行
    if (i % 4 == 0) {
      row = document.createElement("div")
      row.classList.add("row")
    }
    let box = document.createElement("div")
    let btn = document.createElement("p")
    btn.innerText = BTN_LIST[i]
    // 过滤出数字，等号， 操作符
    if (/\d/.test(BTN_LIST[i]) || BTN_LIST[i] == ".") {
      btn.classList.add("btn-s")
    } else if (BTN_LIST[i] == "=") {
      btn.classList.add("btn-l")
    } else {
      btn.classList.add("btn-s")
      btn.classList.add("has-bg")
    }
    // 对第一个进行特殊的设置
    if (i == 0) {
      let span = document.createElement("span")
      span.innerText = BTN_LIST[i]
      span.classList.add("color-font")
      btn.innerText = ""
      btn.appendChild(span)
    }
    box.appendChild(btn)
    box.onclick = core.manageClick
    box.classList.add("box")
    row.appendChild(box)
    // 把每一行放进box
    if (i % 4 == 3) {
      button_box.appendChild(row)
      row = null
    }
    // 最后一个等号要放大
    if (i == BTN_LIST.length - 1) {
      box.classList.add("box-l")
      button_box.appendChild(row)
      row = null
    }
  }
}

// 页面初始化
onload = function () {
  setHtmlFontSize()
  initBtnBox()
  setMode()
  el("dark_mode").onclick = toggleMode
}

// 存储模块
var store = {
  // 数字单元，为了正负问题
  num_cell: "",
  // 当前数字单元正负
  is_negative: false,
  // 最终传输给执行语句的内容
  finally_str: "",
  // 是否点击过等于，因为等于之后再输入内容需要清除内容
  has_count: false,
}

// 计算器核心
var core = Object.create(store)

// 处理点击事件
core.manageClick = function() {
  // 处理如果刚点完等于，再按就要清除结果
  if(core.has_count) {
    console.log(core.has_count)
    core.has_count = false
    el("last_content").innerText = el("now_content").innerText
    el("now_content").innerText = ""
  }
  if(this.innerText == "+/-") {
    if(core.is_negative) {
      core.num_cell = core.num_cell.substr(2)
    } else {
      core.num_cell = '(-' + core.num_cell
    }
    core.is_negative = !core.is_negative
    el("now_content").innerText = core.finally_str + core.num_cell 
  }else if (this.innerText == "=") {
    core.has_count = true
    // 如果还有没放进的数字
    if(core.num_cell.length != 0) {
      // 判断正负
      if(core.is_negative) {
        core.num_cell = core.num_cell + ')'
      }
      core.finally_str += core.num_cell
    }
    el("last_content").innerText = core.finally_str
    try {
      let res = eval(core.finally_str)
      if(res)el("now_content").innerText = res
      else el("now_content").innerText = ""
    } catch(e) {
      el("now_content").innerText = "ERROR"
    }
    // 初始化正负以及数字缓存
    core.is_negative = false
    core.num_cell = ''
    core.finally_str = ''
  } else if (this.innerText == "C") {
    el("now_content").innerText = ""
    el("last_content").innerText = "Hello"
    core.is_negative = false
    core.num_cell = ''
    core.finally_str = ''
  } else if(!/\d/.test(this.innerText) && this.innerText != ".") {
    
    // 输入的是操作符
    if(core.num_cell.length != 0) {
      // 判断正负
      if(core.is_negative) {
        core.num_cell = core.num_cell + ')'
      }
      core.finally_str += core.num_cell
    }
    core.finally_str += this.innerText
    el("now_content").innerText = core.finally_str
    // 初始化正负以及数字缓存
    core.is_negative = false
    core.num_cell = ''
  } else {
    core.num_cell = core.num_cell + this.innerText
    el("now_content").innerText = core.finally_str + core.num_cell 
  }
}